选项卡是大家平时在工作中经常用到的一个效果,下面我给大家一个比较简单的选项卡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>
时间: 2024-08-08 10:15:01