用jQuery简单的实现了table选项卡的功能,有兴趣的小伙伴可以了解学习一下,
下面介绍代码,
使用的语言:html,css,JavaScript,jQuery
html 部分:
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="div">
<div style="display:block;">1</div>
<div>2</div>
<div>3</div>
</div>
简单的写了两个标签,然后我们给他们加点样式
css部分:
ul{
margin: 0px;
list-style: none;
padding: 0px;
width: 100%;
height: 50px;
}
ul>li{
padding: 12px 9px;
border: 1px solid black;
width: 100px;
float: left;
text-align: center;
}
#div>div{
width: 600px;
height: 400px;
border: 1px solid black;
display: none;
}
好啦 ,一个简单的页面就构成了,当然,光这些还不够,我们还需要给他点js;
js部分:
$(document).ready(function(){
$("#ul").children("li").each(function(index,element){
$(this).click(function(){
$($("#div").children()[index]).css("display","block")
$($("#div").children()[index]).siblings().css("display","none")
})
})
})
好啦 这样就实现了table选项卡的切换功能,
当然更复杂的切换页面的选项卡也可以在这个基础上再写,这里就不一一介绍了,有兴趣的自己动手试试