JS实现标签页切换效果
程序员文章站
2023-11-27 19:24:58
本文实例为大家分享了js标签页切换的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js标签页切换的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
#wrap{width:500px; margin:10px auto; }
#tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
#tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
#tag .current{ color:#000; background:#ccc; }
#tagcontent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div id="warp">
<ul id="tag">
<li>标签一</li>
<li>标签二</li>
<li>标签三</li>
<li>标签4</li>
<li>标签5</li>
</ul>
<div id="tagcontent">
<div class="j_tabclass"> 内容一<br>内容一 </div>
<div class="j_tabclass"> 内容二<br>内容二 </div>
<div class="j_tabclass"> 内容三<br>内容三 </div>
<div class="j_tabclass"> 内容4<br>内容4 </div>
<div class="j_tabclass"> 内容4<br>内容5555555555555555 </div>
</div>
</div>
<script type="text/javascript">
//namespace
var vvg = {};
vvg.dom = {};
//创建getelementsbyclassname方法
vvg.dom.getelementsbyclassname = function(str,parent,tag){
//父节点存在
if(parent){
// 当父节点为string类型时，查找dom节点，否则直接引用parent
parent = typeof parent == "string" ? document.getelementbyid(parent):parent;
// parent为空时提示错误信息
if(!parent) alert("找不到标签，请检查参数是否正确");
}else{
// 未传值时，父节点为body
parent = document.body;
}
// tagcontent为节点类型，未传值时为all节点
tag = tag || "*";
// 在父节点查找子节点，建立空数组arr
var els = parent.getelementsbytagname(tag),arr=[];
for(var i=0,n=els.length;i<n;i++){
// 查找每个节点下的classname，以空格分离为一个k数组
for(var j=0,k=els[i].classname.split(" "),l=k.length;j<1;j++){
// 当k数组中有一个值与str值相等时，记住这个标签并推入arr数组
if(k[j]==str){
arr.push(els[i]);
break;
}
}
}
// 返回数组
return arr;
}
//创建tabmanager对象
vvg.tabmanager = function(oo){
this.root = oo.root || "warp";
this.tabulid = oo.tabulid||"tabulid";
this.tabconid = oo.tabconid||"tabconid";
this.tabconclass = oo.tabconclass||"j_tabclass";
this.trggle = oo.trggle || "click";
this.currentcss = oo.currentcss || "current";
}
vvg.tabmanager.prototype = {
tabchange:function(){
// 获取ul的id
var ulid = document.getelementbyid(this.tabulid);
// 获取ul下的li元素
var ulli = ulid.getelementsbytagname("li");
// 获取内容盒子div元素
var tabconid = document.getelementbyid(this.tabconid);
// 获取root下的div的class为特定值的对象数组
var tabconclasses = vvg.dom.getelementsbyclassname(this.tabconclass,this.root,"div");
// 初始化
ulli[0].classname = this.currentcss;
tabconclasses[0].style.display = 'block';
for (var i = ulli.length - 1; i >= 0; i--) {
// 赋值this 与 that,避免this混乱
var that = this;
// 设置对象index属性
ulli[i].index = i;
// 设置对象的事件
ulli[i]["on" + this.trggle] = function(){
for(var j = tabconclasses.length - 1; j >= 0; j--){
tabconclasses[j].style.display = "none";
ulli[j].classname = "";
}
tabconclasses[this.index].style.display = "block";
this.classname = that.currentcss;
}
}
}
}
// 新建对象实例
var tabmanager1 = new vvg.tabmanager(
{
root:"warp",//包裹tab对象的div层的id名称，必填
tabulid:"tag",//tab标签li元素的父亲ul元素的id名称，必填
tabconid:"tagcontent",//内容元素的包裹盒子的id名称，必填
trggle:"mouseover",//切换方式，默认为click，可选
currentcss:"current",//tab标签liy元素的当前css名称，默认为current
tabconclass:"j_tabclass",//内容元素的class名称，默认为j_tabclass
}
);
// 调用对象方法
tabmanager1.tabchange();
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。