JQuery tab effect (separation of JS and HTML)-JS Tutorial-php.cn

JQuery tab effect (separation of JS and HTML)

高洛峰

Release： 2017-02-04 14:33:10

Original

1156 people have browsed it

In the actual application process, as long as the integrity of the tab module structure code is ensured, N tabs of the same type can be added arbitrarily. There is no need to manually bind event handlers in HTML and add content layers to be hidden and displayed. ID.
Javascript (jquery) code is as follows:

<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; 
$(&#39;#&#39;+content).siblings().hide(); 
$(&#39;#&#39;+content).show(); 
controlMenu.eq(num).addClass("current").siblings().removeClass("current"); 
}; 
function idNumber(prefix){ 
var idNum = prefix; 
return idNum; 
}; 
}); 
</script>

Copy after login

CSS style code is as follows:

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

Copy after login

HTML structure code is as follows:

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

Copy after login

More JQuery tab effects (JS and (Separation of HTML) For related articles, please pay attention to the PHP Chinese website!