做这个选显卡开始前，你要准备一个jquery库，下载：jquery库下载，这个jquery库是压缩过的老版本，体积比较小，针对大多数初级效果足够用了。如果要是自己有高版本的库不想用这个可以不用下载，使用你自己有的库就好了。
【效果演示】
1.鼠标点击
2.鼠标经过
这个选项卡方面简单容易修改，可以根据自己的喜好设计不同的样式。而且可以在一个页面上使用多个，只要修改2个地方就不会冲突。
【javascript】
下载js：tabs.js
把这个JS放到jquery库的下面一段。
【html代码】
<div class="jquery_tabs_ys">
<div class="s_tabs">
<a href="javascript:void(0);" tab="#tab_1" class="selected">选项卡1</a>
<a href="javascript:void(0);" tab="#tab_2">选项卡2</a>
</div>
<div class="tab_page" id="tab_1" style="display:block">
<a href="http://www.isnowe.com">snowe博客</a>,
<a href="http://www.isnowe.com/jquery-simple-tab.html">juqery选项卡教程</a>1
</div>
<div class="tab_page" id="tab_2" style="display:none">
<a href="http://www.isnowe.com">snowe博客</a>,juqery选项卡教程2 snowe博客,juqery选项卡教程2
</div>
</div>
<script type="text/javascript">
$.tabs('.s_tabs a');
</script>
【CSS】
.jquery_tabs_ys{
width:80%;
margin:5px auto 10px auto;
}
.jquery_tabs_ys .s_tabs{
line-height:25px;
border:1px solid;
border-color:#eee #eee #ccc #eee;
}
.jquery_tabs_ys .s_tabs a{
display:inline-block;
height:25px;
padding:0 10px;
border-right:1px solid #eee;
font-size:12px;
color:#666;
font-weight:normal;
}
.jquery_tabs_ys .s_tabs a.selected{
color:#000;
font-weight:bold;
background:#eee;
}
.jquery_tabs_ys .tab_page{
border:1px solid #eee;
border-top:0px;
padding:10px;
}
版权所有：爱斯诺博客(isnowe) 《jquery简单选项卡-方便好用》
本文链接：http://isnowe.com/jquery-simple-tab.html
特别声明：除特别标注，本站文章均为原创，遵循CC BY-NC 3.0，转载请注明出处
