for (var i = 1i <= totali++) {
document.getElementById(name + i).className = 'item item1'
}
dv.className = 'item item1 selected'
}
下面body里面onclick="_nav('nav_s',1,4,this)",传一个this参数
用jquery的话就一句代码 $(dv).addClass('selected').siblings().removeClass('selected')就传一个this就行了,不过一般不会把onclick写到html标签中
1、用绝对定位。把所有tab选项卡重叠放到一个位置,显示其中一个的同时,隐藏其他的2、用浮动。所有tab选项卡放到同一行,设置左浮动,把选项卡的父级设置溢出隐藏和相对定位,监听点击事件判断要切换到哪个选项卡,进行偏移。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<script type="text/javascript" src="../js/lib/jquery-1.11.1.min.js"></script>
<title>jquery选项卡</title>
<style type="text/css">
ul,li{margin:0padding:0list-style:none}
a{outline:none}
#tabWrap{width:401pxmargin:0 autooverflow:hidden}
.tabTitle{width:400pxborder-right:1px solid #50afaeoverflow:hidden}
.tabTitle li{float:leftwidth:99pxtext-align:centerpadding:5px 0
border:1px solid #50afaeborder-right:nonecursor:pointer}
.tabTitle li.active{background:#009ccfborder-color:#009ccf}
.tabTitle a{text-decoration:none}
.tabTitle .active a{color:#ffftext-decoration:none}
.tabCon{width:399pxoverflow:hiddenborder:1px solid #009ccfborder-top:none}
.tabCon li{overflow:hiddenpadding:5pxdisplay:none}
</style>
<script type="text/javascript">
$(function(){
$("#tabWrap .tabTitle li").each(function(i,obj){
$(obj).unbind('click').click(function(){
$("#tabWrap .tabTitle li").each(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
}
})
$("#tabWrap .tabCon li").each(function(){
$(this).hide()
})
$(obj).addClass('active')
$("#tabWrap .tabCon li").eq(i).show()
})
})
})
</script>
</head>
<body>
<div id="tabWrap">
<ul class="tabTitle">
<li class="active"><a href="###">tab1</a></li>
<li><a href="###">tab2</a></li>
<li><a href="###">tab3</a></li>
<li><a href="###">tab4</a></li>
</ul>
<ul class="tabCon">
<li style="display:block">tab1内容tab1内容tab1内容tab1内容tab1内容tab1内容tab1内容</li>
<li>tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2</li>
<li>tab3tab3tab3tab,3tab3tab3 tab3tab3tab3tab3tab 3tab3tab3</li>
<li>tab4tab4tab4tab4tab4tab4tab4</li>
</ul>
</div>
</body>
</html>
jquery文件需要自己下一个重新引用一下