$(".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>
本文实例讲述了jQuery简单tab切换效果实现方法。分享给大家供大家参考。具体如下：<script
src="js/jquery-latest.js"></script>
<SCRIPT
language=javascript
type=text/javascript>
$(document).ready(function
()
{
$('.tabtitle
li').click(function
()
{
var
index
=
$(this).index()
$(this).attr('class',"tabhover").siblings('li').attr('class','taba')
$('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide()
})
var
t
=
0
var
timer
=
setInterval(function(){
if(
t
==
$('.tabtitle
li').length
)
t
=
0
$('.tabtitle
li:eq('+t+')').click()
t++
},
700)
})
</SCRIPT>
<div
class="maintab">
<ul
class="tabtitle">
<li
class="tabhover"><a
href="#">选择标题1</a></li>
<li
class="taba"><a
href="#">选择标题2</a></li>
<li
class="taba"><a
href="#">选择标题3</a></li>
<li
class="taba"><a
href="#">选择标题4</a></li>
<li
class="taba"><a
href="#">选择标题5</a></li>
</ul>
<div
class="tabcontent">
选择内容1
</div>
<div
class="tabcontent"
style="DISPLAY:
none">
选择内容2
</div>
<div
class="tabcontent"
style="DISPLAY:
none">
选择内容3
</div>
<div
class="tabcontent"
style="DISPLAY:
none">
选择内容4
</div>
<div
class="tabcontent"
style="DISPLAY:
none">
选择内容5
</div>
</div>
希望本文所述对大家的jQuery程序设计有所帮助。
