【fgm.cc练习2-7】简易选项卡

最新推荐文章于 2019-12-02 12:19:48 发布

denguing

最新推荐文章于 2019-12-02 12:19:48 发布

阅读量205

点赞数

分类专栏： fgm.cc 文章标签： HTML css JavaScript

本文链接：https://blog.csdn.net/DGT4720/article/details/103038891

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文记录了一次关于HTML、CSS和JavaScript实现简易选项卡的练习过程。作者在实践中遇到问题，详细描述了如何通过调整HTML的id和类名，以及CSS和JavaScript的选择器优先级来解决问题。同时，提出了两个疑问：一是为何需要给choose[i]的index赋值，二是为何将JavaScript中设置id的代码改为infor[this.index].setAttribute("id", "active")无法实现预期效果，期待读者解答。" 131616841,10880498,高级软件工程实践与技巧,"['软件工程', '版本控制', '代码编辑器', '软件开发流程', '设计模式']

摘要由CSDN通过智能技术生成

练习网址：http://www.fgm.cc/learn/lesson2/07.html
在这里插入图片描述
我太难了！这是目前为止的练习中，我花第二多时间的一个了！话不多说，“抱怨没有用，一切靠自己”（来自某位超级演说家）。上代码：

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>简易选项卡</title>
	<link rel="stylesheet" type="text/css" href="7_tabs.css">
</head>
<body>
	<div id="container">
		<ul class="choose">
			<li class="act">第一课</li>
			<li>第二课</li>
			<li>第三课</li>
		</ul>
		<div class="infor">
			<ul id="active">
				<li>网页特效原理分析</li>
				<li>响应用户操作</li>
				<li>提示框效果</li>
				<li>事件驱动</li>
				<li>元素属性操作</li>
				<li>动手编写第一个JS特效</li>
				<li>引入函数</li>
				<li>网页换肤效果</li>
				<li>展开/收缩播放列表效果</li>
			</ul>
			<ul>
				<li>改变网页背景颜色</li>
				<li>函数传参</li>
				<li>高重用性函数的编写</li>
				<li>126邮箱全选效果</li>
				<li>循环及遍历操作</li>
				<li>响应用户操作</li>
			</ul>			
			<ul>
				<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
				<li>JavaScript出现的位置、优缺点</li>
				<li>变量、类型、typeof、数据类型转换、变量作用域</li>
				<li>闭包：什么是闭包、简单应用、闭包缺点</li>
				<li>网页换肤效果</li>
				<li>展开/收缩播放列表效果</li>
			</ul>			
		</div>
	</div>
	<script type="text/javascript" src="7_tabs.js"></script>
</body>
</html>

这里第一个div为什么不跟上面第一个选项一样用类名呢，而是选择用id呢？

是因为用类名，一开始页面就不会出现第一个选项卡，可能是优先级的问题。在选项中，我用了类名，一开始也是不会有效果的，后来调整了.choose和.choose li两者的内容，把要改变的样式放在.choose里面写，这样才有效果。可是下面的选项卡对于这样的调整根本没啥作用，所以只能把第一个选项卡的类名改为id，因为id选择器的优先级比类选择器高！

CSS

#container {
	width: 400px;
	margin: 0 auto;
}
.choose {
	width: 400px;
	height: 31px;
	background: black;
	margin: 0;
	padding: 0;
	color: white;

}
/*把act要改变的样式放在父级div中*/
.choose li{
	font-size: 14px;
	list-style-type: none;
	float: left;
	display: block;
	/*background: black;*/
	padding: 5px 15px;
	cursor: pointer;
	border: 1px solid black;
}
.act {
	background: lightgray;
	color: black;
}
.infor {
	position: relative;
	top: -14px;

}
.infor ul {
	font-size: 14px;
	line-height: 20px;
	border: 1px solid black;
	border-top: none;
	display: none;
	padding: 10px 35px;
}
#active {
	display: block;
}

JavaScript

window.onload = function() {
	var choose = document.getElementsByClassName("choose")[0].children;
	var infor = document.getElementsByClassName("infor")[0].children;
	for(var i=0; i<choose.length; i++){
		choose[i].index = i;
		choose[i].onmouseover = function() {
			for(var j=0; j<choose.length; j++){
				choose[j].className = "";
				infor[j].style.display = "none";
			}
			this.className = "act";
			infor[this.index].style.display = "block";
		}
	}
};

JavaScript中的思路，我一开始想的跟别人想的一样：也是先用循环把所有的选项和选项卡的样式变无，然后再把当前选项和对应的选项卡的样式设为特殊。

这里有个练习以来一直存在的疑惑：就是为什么要给choose[i]的index赋值，难道这不是像数组一样的吗（索引号从0开始，+1）？这里如果不赋值，将实现不成。

还有一个疑问，把JavaScript中最后一句，改为 infor[this.index].setAttribute(“id”,“active”);为何实现不了？不太懂。

希望各位朋友能够指点迷津，感谢！

denguing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【fgm.cc练习2-7】简易选项卡

练习网址：http://www.fgm.cc/learn/lesson2/07.html我太难了！这是目前为止的练习中，我花第二多时间的一个了！话不多说，“抱怨没有用，一切靠自己”（来自某位超级演说家）。上代码：HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"&gt...
复制链接

扫一扫

专栏目录