首页 > Web开发 > 详细

jquery实现简单的tab选项卡

时间:2017-07-27 21:00:08      阅读:261      评论:0      收藏:0      [点我收藏+]

选项卡是大家平时在工作中经常用到的一个效果,下面我给大家一个比较简单的选项卡demo。

 

  html:

<ul class="tab">
       <li>11</li>
       <li class="cur">22</li>
       <li>33</li>
 </ul>
 <div>11</div>
 <div class="on">22</div>
 <div>33</div>

css:
div {
margin: 0;
padding: 0;
width: 184px;
height: 200px;
border: 1px solid #ccc;
display: none;
}

.tab {
margin: 0;
padding: 0;
list-style: none;
width: 200px;
overflow: hidden;
}

.tab li {
float: left;
width: 60px;
height: 30px;
background: #ccc;
color: #fff;
border: 1px solid red;
text-align: center;
line-height: 30px;
cursor: pointer;
}

.on {
display: block;
}

.tab li.cur {
background: blue;
}

jquery:
<script>
$(document).ready(function () {
$(".tab li").click(function () {
$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass(‘cur‘);
$("div").hide().eq($(this).index()).show();
});
});
</script>
 


jquery实现简单的tab选项卡

原文:http://www.cnblogs.com/oldZhangFeng/p/7247011.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!