JQuery 选项卡效果(JS与HTML的分离)

在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 Javascript（jquery）代码如下：复制代码代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child").addClass("current"); $("div.content").find("div.layout:not(:first-child)").hide(); $("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)}); $("ul.menu li").click(function(){ var c = $("ul.menu li"); var index = c.index(this); var p = idNumber("No"); show(c,index,p); }); function show(controlMenu,num,prefix){ var content= prefix + num; $('#'+content).siblings().hide(); $('#'+content).show(); controlMenu.eq(num).addClass("current").siblings().removeClass("current"); }; function idNumber(prefix){ var idNum = prefix; return idNum; }; }); </script> CSS样式代码如下：复制代码代码如下: <style type="text/css"> * {margin:0; padding:0} ul,li { list-style:none} .box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif} .tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999} .tagMenu h2 {font-size:12px; padding-left:10px;} .tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;} ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer} ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0} .content { padding:10px} </style> HTML结构代码如下：复制代码代码如下: <body> <div class="box"> <div class="tagMenu"> <h2>No.1 Menu</h2> <ul class="menu"> <li>Label 1.1</li> <li>Label 1.2</li> <li>Label 1.3</li> <li>Label 1.4</li> </ul> </div> <div class="content"> <div class="layout">infomation 1.1</div> <div class="layout">infomation 1.2</div> <div class="layout">infomation 1.3</div> <div class="layout">infomation 1.4</div> </div> </div> <div class="box"> <div class="tagMenu"> <h2>No.2 Menu</h2> <ul class="menu"> <li>Label 2.1</li> <li>Label 2.2</li> <li>Label 2.3</li> <li>Label 2.4</li> </ul> </div> <div class="content"> <div class="layout">infomation 2.1</div> <div class="layout">infomation 2.2</div> <div class="layout">infomation 2.3</div> <div class="layout">infomation 2.4</div> </div> </div> </body>

　　推荐阅读

　　JS 遮照层实现代码

1.先上效果图：2.使用方法：初始化：Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}); 显示：Overlayer.Show();或Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show(); 关闭：O>>>详细阅读

本文标题：JQuery 选项卡效果(JS与HTML的分离)

地址：http://www.17bianji.com/kaifa2/JS/26725.html

1/2 1