js实现tab切换效果实例
发布于 2017-07-17 09:56:22 | 187 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要介绍了js实现的tab标签切换效果，功能非常简单，实现了点击切换的效果，推荐给大家，有需要的小伙伴可以参考下。
直接先来个真相吧：
【HTML代码】
<div id="menu">
<!--tag标题-->
<ul id="nav">
<li><a href="#" class="selected">tab1</a></li>
<li><a href="#" class="">tab2</a></li>
<li><a href="#" class="">tab3</a></li>
<div style="clear:both"></div>
</ul>
<!--二级菜单-->
<div id="menu_con">
<div class="tag" style="display:block">
这是TAB切换效果区域1
</div>
<div class="tag" style="display:none">
这是TAB切换效果区域2
</div>
<div class="tag" style="display:none">
这是TAB切换效果区域3
</div>
</div>
</div>
【js】
/**
* tabs
* @author 橡树小屋
*/
var tabs=function(){
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
//获得相应ID的元素
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";
//alert(elem[j].firstChild);
elem[j].firstChild.className="selected";
}
else{
tabs[j].style.display="none";
elem[j].firstChild.className="";
}
}
}
})(i)
}
}
}
}();
window.onload=function(){
tabs.set("nav","menu_con");
}
【CSS】
body{ background:#FFF;}
a{color:#585858}
#menu{width:360px;}
/*-------------------nav样式----------------------*/
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;
background:url(../images/bg.gif)}
#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}
/*-------------------列表标题样式----------------------*/
#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
.clear{ clear:both}
调用方法：
tabs.set("nav","menu_con");
代码下载 点击这里
这个实例只是简单实现了点击切换的效果，还有许多功能可以添加，大家一起动手实践一下吧。
推荐阅读
最新资讯