js的tab选项卡点击切换或隐藏用jQuery也行！快！

JavaScript05

js的tab选项卡点击切换或隐藏用jQuery也行！快！,第1张

//注意：变量id一定要为数字！

//需要引用jQuery包

$("#t1 a").click(function(){ //获取id为t1的div下面的所有a标签

var id = $(this).attr("id").substr(5)//截取当前点击的对象的id属性的第6位及之后的字符

$("#t1 a").attr("class","")//使所有的a标签的class样式都为空

$(this).attr("class","sel")//使被点击的a标签更换class样式为sel

$(".we").hide()//所有的class名为we的都隐藏

$("#w"+id).show()//让其中的一个class名为we并且id为w+id的div显示

})

设置每个Tab 的点击事件

$(".select-type").click(function(){

$("div[data-select-type]").css("visibility","hidden")//先把所有的Tab隐藏

$(this).css("visibility","visible")//显示当前的tab

})

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Tab效果</title>

<style type="text/css">

ul{

list-style: none

}

*{

margin: 0

padding: 0

}

#tab{

border: 1px solid #ccc

margin: 20px auto

width: 403px

border-top: none

}

.list ul{

overflow: hidden

}

.list li{

float: left

}

.list li{

padding-left: 28px

padding-right: 28px

padding-top: 6px

padding-bottom: 6px

border: 1px solid #ccc

background: -moz-linear-gradient(top, #FEFEFE, #EDEDED)

background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))

border-right: none

cursor: pointer

}

#listCon{

height: 100px

}

#listCon div{

padding:10px

position:absolute

opacity:0

filter:alpha(opacity=0)

}

.list li:first-child{

border-left: none

}

.list li:hover{

background: #fff

border-bottom: none

}

.list li.cur{

background: #fff

border-bottom: none

}

#listCon div.cur{

opacity:1

filter:alpha(opacity=100)

}

</style>

</head>

<body>

<div id="tab">

<div>

<ul>

<li>许嵩</li>

<li>周杰伦</li>

<li>林俊杰</li>

<li>陈奕迅</li>

</ul>

</div>

<div id="listCon">

<div>断桥残雪、千百度、幻听、想象之中</div>

<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>

<div>被风吹过的夏天、江南、一千年以后</div>

<div>十年、K歌之王、浮夸</div>

</div>

</div>

<script type="text/javascript">

window.onload = function(){

var oDiv = document.getElementById("tab")

var lis = oDiv.getElementsByTagName("li")

var oDivCon = document.getElementById("listCon")

var lisDiv = oDivCon.getElementsByTagName("div")

for(var i=0i<lis.lengthi++){

lis[i].index = i

lis[i].onmouseover = function(){

show(this.index)

}

}

function show(a){

for(var j=0j<lis.lengthj++){

lis[j].className = ""

lisDiv[j].className = ""

}

lis[a].className = "cur"

lisDiv[a].className = "cur"

}

}

</script>

</body>

</html>