JS脚本写个TAB切换代码，JS初学者求大神解答

代码太长，不让发，我弄到百度空间里了。http://hi.baidu.com/defy9991/item/c3d1930150968eb1a3df43d2JS部分求大神补... 代码太长，不让发，我弄到百度空间里了。

http://hi.baidu.com/defy9991/item/c3d1930150968eb1a3df43d2

JS部分求大神补完，让其能正常切换。 100分贡上。
写了一半，不知道哪错了，就是把鼠标经过的button加上 CSS中的select，文字部分让style="display:none" 显示出来。
如文本太长发不了的话请发我邮箱：858590834@qq.com
或传到你百度网盘，发我链接也行。非常感谢。展开

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

yugi111
推荐于2016-04-19 · TA获得超过8.1万个赞

知道大有可为答主

回答量：5.1万

采纳率：70%

帮助的人：1.3亿

我也去答题访问个人页

关注

展开全部

<html>
<head>
<meta charset="UTF-8" />
<title>JS的TAB切换</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.tabs {
	margin: 10px;
	height: 98px;
	width: 298px;
	border: 1px solid #eee;
	overflow: hidden;
}

.caption {
	height: 27px;
	position: relative;
	background-color: #F7F7F7;
}

.caption ul {
	position: absolute;
	width: 301px;
	left: -1px;
}

.caption li {
	line-height: 26px;
	background-color: #F7F7F7;
	text-align: center;
	float: left;
	height: 26px;
	width: 58px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eee;
	overflow: hidden;
	padding: 0 1px;
}

.caption li.select {
	background-color: #FFFFFF;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FFFFFF;
	border-left-color: #eee;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #eee;
	padding: 0px;
	font-weight: bold;
}

.caption li a {
	font-size: 14px;
	color: #000000;
	text-decoration: none;
}

.caption li a:hover {
	font-size: 14px;
	color: #000000;
	text-decoration: none;
}

#content {
	width: 300px;
	height: 200px;
	position: absolute;
	left: 4px;
	top: 37px;
}

.con ul {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 19px;
}

.con ul li {
	float: left;
	height: 23px;
	width: 134px;
	overflow: hidden;
}

.con ul li a {
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}

.con ul li a:hover {
	color: #FF0033;
	text-decoration: underline;
}
</style>
<script type="text/javascript">
	var index = 1;
    window.onload = function ()
    {
	    var ul = document.getElementById ("button");
	    var btns = ul.getElementsByTagName ("li");
	    var content = document.getElementById ("content");
	    var cs = content.getElementsByTagName ('div');
	    
	    for ( var i = 0; i < btns.length; i++)
	    {
		    btns[i].index = i;
		    btns[i].onmouseover = function ()
		    {
			    btns[index].className = '';
			    cs[index].style.display = 'none';
			    this.className = "select";
			    cs[this.index].style.display = 'block';
			    index = this.index;
		    }
	    }
    }
</script>
</head>
<body>
	<div class="tabs">
		<div class="caption">
			<ul id="button">
				<li><a href="#">公告</a></li>
				<li class="select"><a href="#">经验</a></li>
				<li><a href="#">论坛</a></li>
				<li><a href="#">前端</a></li>
				<li><a href="#">脚本</a></li>
			</ul>
		</div>
		<div id="content">
			<div class="con" style="display: none">
				<ul>
					<li><a href="#">列列列列列列列列列列</a></li>
					<li><a href="#">列列列列列列列列列列</a></li>
					<li><a href="#">列列列列列列列列列列</a></li>
					<li><a href="#">列列列列列列列列列列</a></li>
				</ul>
			</div>
			<div class="con" style="display: block;">
				<ul>
					<li><a href="#">刚刚刚刚刚刚刚刚刚刚</a></li>
					<li><a href="#">刚刚刚刚刚刚刚刚刚刚</a></li>
					<li><a href="#">刚刚刚刚刚刚刚刚刚刚</a></li>
					<li><a href="#">刚刚刚刚刚刚刚刚刚刚</a></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><a href="#">典典典典典典典典典</a></li>
					<li><a href="#">典典典典典典典典典典</a></li>
					<li><a href="#">典典典典典典典典典典</a></li>
					<li><a href="#">典典典典典典典典典典</a></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><a href="#">五五五五五五五五五五</a></li>
					<li><a href="#">五五五五五五五五五五</a></li>
					<li><a href="#">五五五五五五五五五五</a></li>
					<li><a href="#">五五五五五五五五五五</a></li>
				</ul>
			</div>
			<div class="con" style="display: none">
				<ul>
					<li><a href="#">新新新新新新新新新</a></li>
					<li><a href="#">新新新新新新新新新</a></li>
					<li><a href="#">新新新新新新新新新</a></li>
					<li><a href="#">新新新新新新新新新</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

已赞过 已踩过<

评论收起

微测检测5.10
2023-05-10 广告

您好！建议咨深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互联、语音通话质量），认证遇... 点击进入详情页

本回答由微测检测5.10提供

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS脚本写个TAB切换代码，JS初学者求大神解答

其他类似问题

为你推荐：