JS选项卡

最新推荐文章于 2025-12-20 12:49:16 发布

原创最新推荐文章于 2025-12-20 12:49:16 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Javascript

用到的JS函数：

//id选项卡区域，title选项卡标题标签，classname切换区域class,checkclass标题选中，liid标签不唯一时可选参数为标题区域id
function setTab(id,title,classname,checkclass,liId){   
	if(!document.getElementById || !document.getElementsByTagName || !document.getElementById(id)) return false;
	var id=document.getElementById(id);
	if(!liId){
		var title=id.getElementsByTagName(title);
	}else{
		var liId=document.getElementById(liId);
		var title=liId.getElementsByTagName(title)
	};

	var div=id.getElementsByTagName("div");
	var box=new Array();
	for (var m=0;m<div.length;m++){
		if (div[m].className==classname){
			box.push(div[m]);
		}
	}
	for (var i=0;i<title.length;i++){
		title[i].onmouseover=function(){
			var num=getIndex(this,title);
			for (var j=0;j<title.length;j++ ){
				title[j].className="";
				box[j].style.display="none";
			}
			this.className=checkclass;
			box[num].style.display="block";
		}
	}
}


//得到数组中某个元素位置
function getIndex(con,conArray){
	for (var p in conArray) {
		if(con==conArray[p])return Number(p);
	}
	return -1;//如果没有，返回-1
}

示例一：

<body>
<style type="text/css">
.tab{border:1px solid #000;width:300px;position:relative;height:150px;margin-bottom:30px;}
.tab h2{margin:0;float:left;font-size:12px;line-height:22px;width:100px;text-align:center;cursor:pointer;background-color:#EEEEEE;}
.tab .selected{background-color:red;} 
.tab_d{position:absolute;left:0;top:25px;}
</style>
<div class="tab" id="tab">
	<h2 class="selected">标题一</h2>
	<div class="tab_d">内容一</div>
	<h2>标题二</h2>
	<div class="tab_d" style="display:none">内容二</div>
	<h2>标题三</h2>
	<div class="tab_d" style="display:none">内容三</div>
</div>

调用选项卡方法：

window.onload=function(){
	setTab("tab","h2","tab_d","selected");
}

示例二：

<style type="text/css">
ul{margin:0;padding:0;list-style:none;}
.tab2{border:1px solid #000000;width:300px;}
.tab2_t li{float:left;width:100px;text-align:center;background-color:#EEEEEE;cursor:pointer;}
.tab2_t .selected{background-color:red;}
</style>
<div class="tab2" id="tab2">
	<ul class="tab2_t" id="tab2_t">
		<li class="selected">标题一</li>
		<li>标题二</li>
		<li>标题三</li>
	</ul>
	<div class="tab2_d">
		<ul>
			<li>1</li>
			<li>1</li>
		</ul>
	</div>
	<div class="tab2_d" style="display:none">
		<ul>
			<li>2</li>
			<li>2</li>
		</ul>
	</div>
	<div class="tab2_d" style="display:none">
		<ul>
			<li>3</li>
			<li>3</li>
		</ul>
	</div>
</div>

调用JS方法：

window.onload=function(){
	setTab("tab2","li","tab2_d","selected","tab2_t");
}

demo下载： http://download.csdn.net/detail/jyy_12/3599354

标签

#class #function #div #border #float