search

Home  >  Article  >  Web Front-end  >  JQuery tab effect (separation of JS and HTML)

JQuery tab effect (separation of JS and HTML)

高洛峰
高洛峰Original
2017-02-04 14:33:101138browse

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>

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>

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Javascript implements tab switching effectNext article：Javascript implements tab switching effect

Related articles

See more