以下是jQeury的tab栏切换对应内容跟着切换案例
- 首先上图展示效果图
点击选择内容一,二,三,四下面的内容会跟着变化 - 二话不多说下面为代码
- HTML代码如下:
<div class="tab"> <ul class="title clearfix"> <li class="active"> <a href="javascript:;">内容一</a></li> <li> <a href="javascript:;">内容二</a></li> <li> <a href="javascript:;">内容三</a></li> <li> <a href="javascript:;">内容四</a></li> </ul> <div class="content_list"> <div class="content selected"> <ul> <li> <a href="javascript:;">内容1</a></li> <li> <a href="javascript:;">内容1</a></li> <li> <a href="javascript:;">内容1</a></li> <li> <a href="javascript:;">内容1</a></li> </ul> </div> <div class="content selected"> <ul> <li> <a href="javascript:;">内容2</a></li> <li> <a href="javascript:;">内容2</a></li> <li> <a href="javascript:;">内容2</a></li> <li> <a href="javascript:;">内容2</a></li> </ul> </div> <div class="content selected"> <ul> <li> <a href="javascript:;">内容3</a></li> <li> <a href="javascript:;">内容3</a></li> <li> <a href="javascript:;">内容3</a></li> <li> <a href="javascript:;">内容3</a></li> </ul> </div> <div class="content selected"> <ul> <li> <a href="javascript:;">内容4</a></li> <li> <a href="javascript:;">内容4</a></li> <li> <a href="javascript:;">内容4</a></li> <li> <a href="javascript:;">内容4</a></li> </ul> </div> </div> </div>
-
CSS 样式代码如下:
<style> .tab { width: 334px; border: 1px solid #222; } .title { display: block; text-decoration: none; padding-left: 0; } .title>li { float: left; border-right: 1px solid #111; border-bottom: 1px solid #111; } .title>li.active a { background-color: pink; } .title>li:nth-child(4) { border-right: none; } .title>li a { display: block; padding: 10px 20px; background-color: #fff; } .content { display: none; } .content_list .selected { display: block; } .claerfix::after { content: ""; display: block; height: 0; } .claerfix { zoom: 1; } </style>
-
jquery 代码如下:
<script> $(function() { var $lis = $(".title>li"); var $contents = $(".content"); // console.log($contents) $lis.on("click", function() { $(this).addClass("active").siblings().removeClass("active"); var index = $(this).index(); $contents.eq(index).addClass("selected").siblings().removeClass("selected"); }); }) </script>