本文给大家介绍的是一款使用jQuery实现的简易选项卡的代码,通过控制css熟悉来实现tab切换,思路清晰,这里推荐给大家。
今天突然心血来潮,想到一个很简单的方法即可达到的tab效果
其实逻辑很简单,但看到网上基本上没这样写的
不知道实际应用中是否会有问题呢,请大侠指教
复制代码 代码如下:
*{ margin:0; padding:0;}
body, ul, li {
margin:0;
padding:0;
}
body {
font:12px/1.5 Tahoma;
}
#outer {
width:450px;
margin:10px auto;
}
#tab {
overflow:hidden;
zoom:1;
background:#000;
border:1px solid #000;
}
#tab li {
float:left;
color:#fff;
height:30px;
cursor:pointer;
line-height:30px;
list-style-type:none;
padding:0 20px;
}
#tab li.current {
color:#000;
background:#ccc;
}
#content {
border:1px solid #000;
border-top-width:0;
}
#content ul {
line-height:25px;
display:none;
margin:0 30px;
padding:10px 0;
}
- 第一课
- 第二课
- 第三课
- 1111
- 2222
- 3333
图片演示:
以上就是本文所述的全部内容了,希望大家能够喜欢。
以上就是jQuery简单几行代码实现tab切换的详细内容,更多请关注本站其它相关文章!