jquery与html 分离

浏览数：38 / 时间：2015年06月09日

基于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）代码如下：

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 " );
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样式代码如下：

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 }
10 .content { padding : 10px }
11 </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 >
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 分离