tab switch, the front-end gods are familiar with, however, because there are too many occasions, so you may not care about it.I don't know if you want to comb your logic and write it once or use the existing templates or your own libraries when you encounter this kind of situation. Today I summarize my experience and optimize the following points.
a, the three writing methods can be selected according to the specific page usage environment.b. Separation of structure layer, representation layer and behavior layer
c, Layer label selection is not restricted.
d, pass function parameters to avoid interference between tab switching behavior and style on one page
1, call JQ Library
Structure layer:
<Container id="Container id">
<button container class="tab1">
<Include Label><Button class="Focus Button class">...</Button></Include Label>
<Include Label><Button>...</Button></Include Label>
</Button Container>
<Content Container class="tab_con">
<Content Label>...</Content Label>
<Content Label Class="hidden">...</Content Label>
</Content Container>
</Container>
Behavior layer:
Tab_switch1 (container id, focus menu class);
Implementation code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab Different Writing of Tabs</title>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
body, div, ul, li { margin: 0; padding: 0; list-style: none; font: 14px/30px arial, "Microsoft YaHei"; }
a { text-decoration: none; }
.tab_a { width: 600px; height: auto; margin: 20px auto; }
.tab_a .tab1ys { width: 100%; height: 50px; }
.tab_a .tab1ys li { width: 200px; float: left; }
.tab_a .tab1ys li a { width: 100%; height: 100%; border: 1px solid #666; border-right: none; line-height: 50px; font-size: 14px; color: #000; text-align: center; display: block }
.tab_a .tab1ys li:last-child a { border-right: 1px solid #666; }
.tab_a .tab1ys li a.active { background: #333; color: #CCC; }
.tab_a .tabcon_sy { width: 100%; height: 300px; border: 1px solid #666; border-top: none; overflow: hidden; }
.tab_a .tabcon_sy li { width: 94%; height: 100%; padding: 15px 3%; }
.hidden { display: none; }
</style>
</head>
<body>
<div class="tab_a" id="tab_a">
<h2>jquery Writing</h2>
<ul class="tab1 tab1ys">
<li><a class="active" href="javascript:void(0)">Tab 1</a></li>
<li><a href="javascript:void(0)">Tab 2</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
</ul>
<ul class="tab_con tabcon_sy">
<li>Contents of Tab 1</li>
<li class="hidden">Contents of Tab 2</li>
<li class="hidden">Contents of Tab 3</li>
</ul>
</div>
<script>
//jquery notation
function tab_switch1(ele_id,activeclass){
$("#"+ele_id+">.tab1").children().each(function() {
var xh=$(this).index();
$(this).find("*").click(function(){
$(this).addClass(activeclass);
$(this).parent().siblings().find("*").removeClass(activeclass);
$("#"+ele_id+">.tab_con").find("*").addClass("hidden");
//alert(xh);
$("#"+ele_id+">.tab_con").find("*").eq(xh).removeClass("hidden");
})
});
}
//Call menu switch function based on ID
tab_switch1("tab_a","active");
</script>
</body>
</html>Structure layer:
<Container id="Container id">
<button container class="tab1">
<Include Label><Button class="Focus Button class">...</Button></Include Label>
<Include Label><Button>...</Button></Include Label>
</Button Container>
<Content Container class="tab_con">
<Content Label>...</Content Label>
<Content Label Class="hidden">...</Content Label>
</Content Container>
</Container>
Behavior layer:
Tab_switch2 (container id, focus menu class);
Implementation code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab Different Writing of Tabs</title>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
body, div, ul, li { margin: 0; padding: 0; list-style: none; font: 14px/30px arial, "Microsoft YaHei"; }
a { text-decoration: none; }
.tab_a { width: 600px; height: auto; margin: 20px auto; }
.tab_a .tab1ys { width: 100%; height: 50px; }
.tab_a .tab1ys li { width: 200px; float: left; }
.tab_a .tab1ys li a { width: 100%; height: 100%; border: 1px solid #666; border-right: none; line-height: 50px; font-size: 14px; color: #000; text-align: center; display: block }
.tab_a .tab1ys li:last-child a { border-right: 1px solid #666; }
.tab_a .tab1ys li a.active { background: #333; color: #CCC; }
.tab_a .tabcon_sy { width: 100%; height: 300px; border: 1px solid #666; border-top: none; overflow: hidden; }
.tab_a .tabcon_sy li { width: 94%; height: 100%; padding: 15px 3%; }
.hidden { display: none; }
</style>
</head>
<body>
<div class="tab_a" id="tab_b">
<h2>pure js Writing(Through containers id Pass to function)</h2>
<ul class="tab1 tab1ys">
<li><a class="active" href="javascript:void(0)">Tab 1</a></li>
<li><a href="javascript:void(0)">Tab 2</a></li>
<li><a href="javascript:void(0)">Tab 3</a></li>
</ul>
<ul class="tab_con tabcon_sy">
<li>Contents of Tab 1</li>
<li class="hidden">Contents of Tab 2</li>
<li class="hidden">Contents of Tab 3</li>
</ul>
</div>
<script>
//Pure js writing
function tab_switch2(ele_id,activeclass){
var contain=document.getElementById(ele_id);
var tab_tit=contain.querySelectorAll(".tab1>*");
var tab_con=contain.querySelectorAll(".tab_con>*");
var tab_num=tab_tit.length;
var con_num=tab_con.length;
for(i=0;i<tab_num;i++){
tab_tit[i].onclick=(function(i){
return function(){
for(j=0;j<con_num;j++){
if(i==j){
tab_tit[j].firstChild.className=activeclass;
tab_con[j].className="";
}
else{
tab_tit[j].firstChild.className="";
tab_con[j].className="hidden";
}
}
}
})(i);
}
}
tab_switch2("tab_b","active");
</script>
</body>
</html>Structure/Behavior Layer:
<Container>
<Button Container id="Button Container ID">
<Include Label><Button class="Focus Button class" onclick="tab_switch3( Button Container ID, Content Container ID, Focus Button class, Sequence Number)">...</Button></Include Label>
<Include Label><Button > onclick="tab_switch3 (Button Container ID, Content Container ID, Focus Button class, Serial Number)">...</Button></Include Label>
</Button Container>
<Content Container id="Content Container ID">
<Content Label>...</Content Label>
<Content Label Class="hidden">...</Content Label>
</Content Container>
</Container>
Implementation code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab Different Writing of Tabs</title>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
body, div, ul, li { margin: 0; padding: 0; list-style: none; font: 14px/30px arial, "Microsoft YaHei"; }
a { text-decoration: none; }
.tab_a { width: 600px; height: auto; margin: 20px auto; }
.tab_a .tab1ys { width: 100%; height: 50px; }
.tab_a .tab1ys li { width: 200px; float: left; }
.tab_a .tab1ys li a { width: 100%; height: 100%; border: 1px solid #666; border-right: none; line-height: 50px; font-size: 14px; color: #000; text-align: center; display: block }
.tab_a .tab1ys li:last-child a { border-right: 1px solid #666; }
.tab_a .tab1ys li a.active { background: #333; color: #CCC; }
.tab_a .tabcon_sy { width: 100%; height: 300px; border: 1px solid #666; border-top: none; overflow: hidden; }
.tab_a .tabcon_sy li { width: 94%; height: 100%; padding: 15px 3%; }
.hidden { display: none; }
</style>
</head>
<body>
<div id="tab_c" class="tab_a">
<h2>pure js Writing(Click a button to invoke a function)</h2>
<ul class="tab1 tab1ys" id="tab3">
<li><a class="active" href="javascript:void(0)" onclick="tab_switch3('tab3','tab_con3','active',0)">Tab 1</a></li>
<li><a href="javascript:void(0)" onclick="tab_switch3('tab3','tab_con3','active',1)" >Tab 2</a></li>
<li><a href="javascript:void(0)" onclick="tab_switch3('tab3','tab_con3','active',2)">Tab 3</a></li>
</ul>
<ul class="tab_con tabcon_sy" id="tab_con3">
<li>Contents of Tab 1</li>
<li class="hidden">Contents of Tab 2</li>
<li class="hidden">Contents of Tab 3</li>
</ul>
</div>
<script>
//Pure js writing
function tab_switch3(tit_id,con_id,activeclass,this_num){
//var contain=document.getElementById(ele_id);
var tab_tit=document.getElementById(tit_id);
var tab_con=document.getElementById(con_id);
var cccc=tab_tit.children;
var dddd=tab_con.children;
var tab_num1=cccc.length;
//alert(tab_num1);
for(i=0;i<tab_num1;i++){
cccc[i].firstChild.className="";
dddd[i].className="hidden";
}
cccc[this_num].firstChild.className=activeclass;
dddd[this_num].className="";
}
</script>
</body>
</html>