标签栏多出一部分，而且刚开始加载的时候，不知道为什么显示了两个div的内容-慕课网

标签栏多出一部分，而且刚开始加载的时候，不知道为什么显示了两个div的内容

来源：1-2 tab页面布局-标题布局

鄢栋

2017-06-22 16:39

//js
function getId(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}
window.onload = function () {
	var titLis = getId('notice-title').getElementsByTagName('li');
	var mods = getId('notice-content').getElementsByTagName('div');
	console.log(mods.length + titLis.length);
	//确保titles的个数与content个数相等
	if (titLis.length != mods.length) return;
	for(var i = 0;i < titLis.length; i ++) {
		console.log(titLis[i]);
		//给每个li加上索引属性id，方便后面的content里面的div调用
		titLis[i].id = i;
		//鼠标滑过时给每一个li元素加上select高亮显示
		titLis[i].onmouseover = function() {
			for(var j = 0;j < titLis.length;j ++) {
				titLis[j].className = '';//添加高亮之前去除之前的高亮样式，不然就会点一个高亮增加一个，而不是只选中一个
				mods[j].style.display = 'none'; //全部隐藏，方便后边mods显示内容
			}
			this.className = 'select';
			mods[this.id].style.display = 'block';
		}
	}
}

//CSS
* {
	padding: 0;
	margin: 0;
	font-size: 16px;
	list-style: none;
	text-decoration: none;
}
.notice {
	width: 298px;
	height: 98px;
	border: 1px solid #eee;
	overflow: hidden;
	margin: 100px auto;
}
.notice-title {
	background-color: #f7f7f7;
	height: 27px;
	position: relative;
}
.notice-title ul {
	width: 301px;
	left: -1px; //为了不让最左边和最右边的tab的左边框和右边框与最外层的盒子的边框重叠
	position: absolute;
}
.notice-title li {
	float: left;
	width: 58px; //301px/5个li元素，每个li元素还要加1px的边框
	height: 26px;
	line-height: 26px; //要加一个底边框,没有高亮的时候
	color: black;
	text-align: center;
	border-bottom: 1px solid #eee;
	background-color: #f7f7f7;
}
.notice-title li.select {
	background-color: #fff;
	border-bottom-color: #fff;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	font-weight: bold;
}
.notice-title li a:link,.notice-title li a:visited {
	color: black;
}
.notice-title li a:hover {
	color: #f90;
}
.notice-content .mod {
	overflow: hidden;
	margin: 10px 10px 10px 19px;
}

//html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>tab-面向过程的制作多种切换效果</title>
	<link rel="stylesheet" type="text/css" href="../css/tab_process.css">
	<script type="text/javascript" src="../js/tab_process.js"></script>
</head>
<body>
	<!-- tab切换外层盒子 -->
	<div class="notice">
		<div class="notice-title" id="notice-title">
			<ul>
				<li class="select"><a href="#">切换1</a></li>
				<li><a href="#">切换2</a></li>
				<li><a href="#">切换3</a></li>
				<li><a href="#">切换4</a></li>
				<li><a href="#">切换5</a></li>
			</ul>
		</div>
		<div class="notice-content" id="notice-content">
			<div class="mod">1111</div>
			<div class="mod">2222</div>
			<div class="mod">3333</div>
			<div class="mod">4444</div>
			<div class="mod">5555</div>
		</div>
	</div>
</body>
</html>

写回答关注

3回答

鄢栋

2017-06-22 16:47:43

li元素的索引

0 0
鄢栋

2017-06-22 16:45:20

切换5的时候多出一部分背景色

1 0

鄢栋

关于这个问题，是因为在高亮之前（鼠标滑过之前）没有给li元素添加1px的填充，加填充的目的是去除border属性会改变容器大小的毛病，然后因为你加了左右1px的填充，那li的总宽度就变为62px，所以你在高亮的时候（鼠标滑过的时候,表现为.select类）去掉这个填充，也就是padding:0;这样好一点了。但是你会发现，左边还是会有边框重叠的问题，原因是，你要在.notice这个外层盒子设置position:relative;然后对于你的ul设置position:absolute;这样left:-1px;才会有效。解决了第一个内容与外层盒子边框重叠的问题。

2017-06-22 22:46:23

共 1 条回复 >
鄢栋

2017-06-22 16:43:26

运行的效果

1 0

共 1 条回复 >