原生js实现tab标签切换
1、新建html文档。
2、书写hmtl代码。
<div id="menu">
<ul id="nav">
<li><a href="#" class="selected">jQuery特效</a></li>
<li><a href="#" class="">tab切换</a></li>
<li><a href="#" class="">菜单导航</a></li>
</ul>
<div id="menu_con">
<div class="tag" style="display:block"> 这里是jQuery特效内容列表 </div>
<div class="tag" style="display:none"> 这里是tab切换效果 </div>
<div class="tag" style="display:none"> 这里是菜单导航效果 </div>
</div>
</div>
3、书写css代码。
<style>
* { margin: 0; padding: 0; list-style: none; }
body { font-size: 12px; }
#menu { width: 360px; overflow: hidden; margin: 100px auto; border: 1px solid #BF9660; }
#menu #nav { display: block; width: 100%; padding: 0; margin: 0; list-style: none; }
#menu #nav li { float: left; width: 120px; }
#menu #nav li a { display: block; line-height: 27px; text-decoration: none; padding: 0 0 0 5px; text-align: center; color: #333; }
#menu_con { width: 358px; height: 135px; border-top: none }
.tag { padding: 10px; overflow: hidden; }
.selected { background: #C5A069; color: #fff; }
</style>
4、书写并添加js代码。
<script>
var tabs=function(){
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
function id(name){
return document.getElementById(name);
}
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType==1? elem:next(elem);
}
function next(elem){
do{
elem=elem.nextSibling;
}while(
elem&&elem.nodeType!=1
)
return elem;
}
return {
set:function(elemId,tabId){
var elem=tag("li",id(elemId));
var tabs=tag("div",id(tabId));
var listNum=elem.length;
var tabNum=tabs.length;
for(var i=0;i<listNum;i++){
elem[i].onclick=(function(i){
return function(){
for(var j=0;j<tabNum;j++){
if(i==j){
tabs[j].style.display="block";
elem[j].firstChild.className="selected";
}
else{
tabs[j].style.display="none";
elem[j].firstChild.className="";
}
}
}
})(i)
}
}
}
}();
tabs.set("nav","menu_con");
</script>
5、代码整体结构。
6、查看效果。
