您的位置：首页 > Web前端 > JQuery

JQuery制作的选项卡，重点体现在JS与HTML的分离

2008-11-12 16:32 525 查看
基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。

#xzw_box * {margin:0; padding:0}
#xzw_box ul, #xzw_box li { list-style:none; list-style-type:none}
#xzw_box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; background:#fff}
#xzw_box .tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
#xzw_box .tagMenu h2 {font-size:12px; padding-left:10px;}
#xzw_box .tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
#xzw_box 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}
#xzw_box ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
#xzw_box .content { padding:10px}
#xzw_box .content .layout {display:none}

No.1 Menu

Label 1.1

Label 1.2

Label 1.3

Label 1.4

infomation 1.1
infomation 1.2
infomation 1.3
infomation 1.4

No.2 Menu

Label 2.1

Label 2.2

Label 2.3

Label 2.4

infomation 2.1
infomation 2.2
infomation 2.3
infomation 2.4

Javascript（jquery）代码如下：

1 <script language="javascript" type="text/javascript">

2 $(document).ready(function(){

3 $("ul.menu li:first-child").addClass("current");

4 $("div.content").find("div.layout:not(:first-child)").hide();

5 $("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});

6 $("ul.menu li").click(function(){

7 var c = $("ul.menu li");

8 var index = c.index(this);

9 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样式代码如下：

1 <style type="text/css">

2 * {margin:0; padding:0}

3 ul,li { list-style:none}

4 .box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}

5 .tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}

6 .tagMenu h2 {font-size:12px; padding-left:10px;}

7 .tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}

8 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}

9 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结构代码如下：

1 <body>

2 <div class="box">

3 <div class="tagMenu">

4 <h2>No.1 Menu</h2>

5 <ul class="menu">

6 <li>Label 1.1</li>

7 <li>Label 1.2</li>

8 <li>Label 1.3</li>

9 <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>

改进版：JQuery制作的选项卡改进版
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航