该方法实现选项卡原理: 每个a标签的对应一个div块,除了第一个div块,其他都隐藏起来,后面通过给a标签添加点击事件,获取a标签的href属性值,即该属性值去掉#号就是对应div块的id,通过给该块添加active类和删除其他块可能存在的active就可以很简单地实现了.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡-JQuery版</title> <style type="text/css"> ul{ clear: both; overflow: hidden; padding: 0; } ul li{ float: left; list-style: none; } .option-blocks .block{ overflow: hidden; display: none; } .active{ display: block!important;/*提升级别,防止被以上的display: none覆盖*/ } .option-tabs ul{ border-bottom: 1px solid #ddd; } .option-tabs ul li a{ text-decoration: none; padding: 5px 10px; } .option-tabs ul li a:visited{ background: red; } </style> </head> <body> <div clss="tabs-container"> <div class="option-tabs"> <ul> <li><a href="#block-a">block-a</a></li> <li><a href="#block-b">block-b</a></li> <li><a href="#block-c">block-c</a></li> <li><a href="#block-d">block-d</a></li> </ul> </div> <div class="option-blocks"> <div id="block-a" class="block active">block-A</div> <div id="block-b" class="block">block-B</div> <div id="block-c" class="block">block-C</div> <div id="block-d" class="block">block-D</div> </div> </div> <!--引用jq插件--> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $('.option-tabs ul a').click(function(){ //获取a标签的href属性值 var href = $(this).attr('href'); //移除所有的active类 $('.option-blocks > .block').removeClass('active'); //给当前选中的blcok增加active类 $('.option-blocks > '+href).addClass('active'); }) </script> </body> </html>简单展示效果 优点: 1.只需要配置好a标签的href属性和div的id即可随时添加选项模块,不需要再动其他地方的代码(即href属性值和模块id值要一样,但是 href属性值前面需加一个#号). 2.代码量少. 3.原理容易理解. 缺点:选项卡每个模块id名需不一样.
注意: 只是简单实现了选项卡功能,具体css样式可自行设置.
