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

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

类似上图中,鼠标经过第一行选项卡 第二行和最下面的内容都会切换,鼠标经过第二行选项卡,最下面的内容也会切换,我不知道我描述的是不是清楚,
...全文
181 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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
  • 打赏
  • 举报
回复
没人可以回答我吗

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧