tab选项卡在火狐里和360里没用 在IE里就有用，我是两个tab调用的一个js语句 10
<!--content-->functionsetTab(name,cursel,n){for(i=1;i<=n;i++){varmenu=document.getEle...
<!--content-->
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
<!-end-contend-->
<div id="con_two_2" class="nei" style="display:none;">
<div class="menu">
<ul>
<li id="tree1" class="hover" onclick="setTab('tree',1,4)">工程类型</li>
<li id="tree2" onclick="setTab('tree',2,4)">工程类别</li>
<li id="tree3" onclick="setTab('tree',3,4)">复杂程度</li>
<li id="tree4" onclick="setTab('tree',4,4)">内容确认</li>
</ul>
</div>
<div class="content">
<div id="con_tree_1" style="display:none;">123</div>
<div id="con_tree_2" style="display:none;">hahahahha</div>
<div id="con_tree_3" style="display:none;">hahahahha</div>
<div id="con_tree_4" style="display:none;">hahahahha</div>
</div>
</div> 展开
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
<!-end-contend-->
<div id="con_two_2" class="nei" style="display:none;">
<div class="menu">
<ul>
<li id="tree1" class="hover" onclick="setTab('tree',1,4)">工程类型</li>
<li id="tree2" onclick="setTab('tree',2,4)">工程类别</li>
<li id="tree3" onclick="setTab('tree',3,4)">复杂程度</li>
<li id="tree4" onclick="setTab('tree',4,4)">内容确认</li>
</ul>
</div>
<div class="content">
<div id="con_tree_1" style="display:none;">123</div>
<div id="con_tree_2" style="display:none;">hahahahha</div>
<div id="con_tree_3" style="display:none;">hahahahha</div>
<div id="con_tree_4" style="display:none;">hahahahha</div>
</div>
</div> 展开
4个回答
展开全部
尊敬的用户，您好！很高兴为您答疑。
您的dom对象获取有问题啊。其实像这种略有有点复杂的操作，建议优先考虑引入jQuery框架，可以让您的代码更加优雅。下面是我实现的一组tab效果的js示例：
function setTab(obj,type){
$("li").removeClass("on")
$(obj).toggleClass("on");
if(type=="user1"){
$("#user1").show();
$("#user2").hide();
$("#user3").hide();
}else if(type=="user2"){
$("#user1").hide();
$("#user2").show();
$("#user3").hide();
}else if(type=="user13"){
$("#user1").hide();
$("#user2").hide();
$("#user3").show();
}else{
$("#user1").hide();
$("#user2").hide();
$("#user3").hide();
}
}
代码是不是相对优雅简洁很多？而且这个方式下，规避了IE和非IE浏览器下display的显隐问题。也规避了doucment.getElementById()方法在火狐和IE内核下获取到的对象差异的问题。
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
您的dom对象获取有问题啊。其实像这种略有有点复杂的操作，建议优先考虑引入jQuery框架，可以让您的代码更加优雅。下面是我实现的一组tab效果的js示例：
function setTab(obj,type){
$("li").removeClass("on")
$(obj).toggleClass("on");
if(type=="user1"){
$("#user1").show();
$("#user2").hide();
$("#user3").hide();
}else if(type=="user2"){
$("#user1").hide();
$("#user2").show();
$("#user3").hide();
}else if(type=="user13"){
$("#user1").hide();
$("#user2").hide();
$("#user3").show();
}else{
$("#user1").hide();
$("#user2").hide();
$("#user3").hide();
}
}
代码是不是相对优雅简洁很多？而且这个方式下，规避了IE和非IE浏览器下display的显隐问题。也规避了doucment.getElementById()方法在火狐和IE内核下获取到的对象差异的问题。
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我给你写一个简单点的
<div class="tabs">
<div class="navs">
<a href="javascript:" class="active">menu1</a>
<a href="javascript:">menu2</a>
<a href="javascript:">menu3</a>
</div>
<div class="contents">
<div class="content active">content1</div>
<div class="content">content2</div>
<div class="content">content3</div>
</div>
</div>
.content{
display:none;/* 默认隐藏 */
}
.content.active{
display:block;/*这个样式的div显示*/
}js:
//jquery
function Tab(wrap){
$(wrap).each(function(){
var tab = $(this);
var contents = tab.find('.contents').children('div');
tab.on('click' , '.navs a' , function(){
var menu = $(this),
index = menu.index();
//给当前点击的按钮添加样式，并且移除其它的样式
menu.addClass('active').siblings().removeClass('active');
//显示对应的内容,并且隐藏其它的内容
contents.eq(index).addClass('active').siblings().removeClass('active');
});
});
}
Tab('.tabs');//使用class同一个页面里不需要多次初始化
//原生ie8+
function Tab(wraps){
each(wraps , function(wrap){
var contents = $('.contents > div' , wrap),
menus = $('.navs a' , wrap);
each(menus , function(menu , index){
setClass(menus , index , 'active' , '');
setClass(contents , index , 'active' , 'content');
});
});
//还原样式和设置当前元素样式
function setClass(list , index , cls , def){
each(list , function(item){
item.className = def;//清空样式
});
list[index].className += ' ' + cls;
}
}
function $(wrap , parent){
return [].slice.call((parent || document).querySelectorAll(wrap));
}
function each(arr , callback){
for(var i=0 , item;item = arr[i] ; i++ ) callback.call(item , item , i , arr);
}
var addEvent = document.addEventListener ? function(el , type , fn){
el.addEventListener(type , fn , false);
} : function(el , type , fn){
el.attachEvent('on' + type , fn , false);
};
Tab($('.wrap'));//使用class同一个页面里不需要多次初始化
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>
<body>
<div id="con_two_1" class="nei" >
<div class="menu">
<ul>
<li id="tree1" class="hover" onclick="setTab('tree',1,4)">工程类型</li>
<li id="tree2" onclick="setTab('tree',2,4)">工程类别</li>
<li id="tree3" onclick="setTab('tree',3,4)">复杂程度</li>
<li id="tree4" onclick="setTab('tree',4,4)">内容确认</li>
</ul>
</div>
<div class="content">
<div id="con_tree_1" style="display:none;">123</div>
<div id="con_tree_2" style="display:none;">hahahahha1</div>
<div id="con_tree_3" style="display:none;">hahahahha2</div>
<div id="con_tree_4" style="display:none;">hahahahha3</div>
</div>
</div>
<div id="con_two_2" class="nei" >
<div class="menu">
<ul>
<li id="treee1" class="hover" onclick="setTab('treee',1,4)">工程类型</li>
<li id="treee2" onclick="setTab('treee',2,4)">工程类别</li>
<li id="treee3" onclick="setTab('treee',3,4)">复杂程度</li>
<li id="treee4" onclick="setTab('treee',4,4)">内容确认</li>
</ul>
</div>
<div class="content">
<div id="con_treee_1" style="display:none;">123</div>
<div id="con_treee_2" style="display:none;">hahahahha22</div>
<div id="con_treee_3" style="display:none;">hahahahha33</div>
<div id="con_treee_4" style="display:none;">hahahahha44</div>
</div>
</div>
</body>
</html>
我在ie 火狐 谷歌下面测试都是正常的...
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery-easyui有现成的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
