紧急求助大神！多层tab标签选项卡鼠标滑动切换怎么写

智障青年 2016-04-03 06:46:54

类似上图中，鼠标经过第一行选项卡第二行和最下面的内容都会切换，鼠标经过第二行选项卡，最下面的内容也会切换，我不知道我描述的是不是清楚，

...全文

183 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

智障青年 2016-04-04

打赏
举报

是多层的啊还有一层tab标签啊

cocotsau 2016-04-03

打赏
举报

使用onmouseover事件实现写了个简单的demo，一起分享

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {padding:0; margin:0;}
img {border:none;}
ul,ol {list-style:none;}
a {text-decoration:none;}
.warp_tab {position:relative;}
.tab_btn {position:absolute; top:0; left:0; height:25px; width:230px; background:#CCC;}
.tab_btn div {display:block; float:left; background:#0CC; margin-left:10px; line-height:25px;}
.tab_btn div.active {background:yellow;}
.tab_content {height:200px; width:230px; position:absolute; top:30px; left:0;}
.tab_content div {position:absolute; top:0; left:0; width:100%; height:100%; background:#CCC;}
</style>
<script>
var getByClass = function(obj, sCls){
	var aEle=obj.getElementsByTagName("*");
	var aResult=[];
	var re=new RegExp("\\b"+sCls+"\\b", "i");
	for(var i=0;i<aEle.length;i++){
		if(re.test(aEle[i].className))aResult.push(aEle[i]);
	}
	return aResult;
}

function TabSwitch(){
	this.initialize.apply(this, arguments);
}

TabSwitch.prototype={
	
	initialize : function(options){
		this.setOptions(options);
		for(var i=0;i<this.options.nav.length;i++){
			var that=this;
			this.options.nav[i].onmouseover=function(i){
				return function(){
					that.fnActive(i);
				}
			}(i);
		}
	},
	
	fnActive : function(num){
		for(var i=0;i<this.options.nav.length;i++){
			this.options.nav[i].className="";
			this.options.content[i].style.display="none";
		}
		this.options.nav[num].className="active";
		this.options.content[num].style.display="block";

	},
	setOptions : function(options){
		this.options={
			nav : this.aNav,
			content :this.aContent
		};
		for(var p in options)this.options[p]=options[p];
	}

};

window.onload=function(){
	aNav=getByClass(document.body, "tab_btn")[0].getElementsByTagName("div");
	aContent=getByClass(document.body, "tab_content")[0].getElementsByTagName("div");
	var t1= new TabSwitch({nav:aNav, content:aContent});
	
};
</script>
</head>

<body>
<div id="wrap_tab">
    <div class="tab_btn">
    	<div class="active">财经</div>
        <div>经济</div>
        <div>政治</div>
        <div>体育</div>
        <div>娱乐</div>
    </div>
    <div class="tab_content">
        <div style="display:block;">1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
        <div>5555</div>
    </div>
</div>
</body>
</html>

智障青年 2016-04-03