首页 > 代码库 > jquery与html 分离
jquery与html 分离
基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程 中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
No.1 Menu
- Label 1.1
- Label 1.2
- Label 1.3
- Label 1.4
No.2 Menu
- Label 2.1
- Label 2.2
- Label 2.3
- Label 2.4
Javascript（jquery）代码如下：
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 " );
10 show(c,index,p);
11 });
12
13 function show(controlMenu,num,prefix){
14 var content = prefix + num;
15 $( ‘ # ‘ + content).siblings().hide();
16 $( ‘ # ‘ + content).show();
17 controlMenu.eq(num).addClass( " current " ).siblings().removeClass( " current " );
18 };
19
20 function idNumber(prefix){
21 var idNum = prefix;
22 return idNum;
23 };
24 });
25 < / script>
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 }
10 .content { padding : 10px }
11 </style>
HTML结构代码如下：
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 >
10 </ ul >
11 </ div >
12 < div class ="content" >
13 < div class ="layout" > infomation 1.1 </ div >
14 < div class ="layout" > infomation 1.2 </ div >
15 < div class ="layout" > infomation 1.3 </ div >
16 < div class ="layout" > infomation 1.4 </ div >
17 </ div >
18 </ div >
19
20 < div class ="box" >
21 < div class ="tagMenu" >
22 < h2 > No.2 Menu </ h2 >
23 < ul class ="menu" >
24 < li > Label 2.1 </ li >
25 < li > Label 2.2 </ li >
26 < li > Label 2.3 </ li >
27 < li > Label 2.4 </ li >
28 </ ul >
29 </ div >
30 < div class ="content" >
31 < div class ="layout" > infomation 2.1 </ div >
32 < div class ="layout" > infomation 2.2 </ div >
33 < div class ="layout" > infomation 2.3 </ div >
34 < div class ="layout" > infomation 2.4 </ div >
35 </ div >
36 </ div >
37 </ body >
jquery与html 分离
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。