javascript创建选项卡----慕课10-1编程挑战

最新推荐文章于 2022-03-14 10:19:34 发布

霹雳弦惊

最新推荐文章于 2022-03-14 10:19:34 发布

阅读量277

点赞数

分类专栏：基础知识文章标签：前端

本文链接：https://blog.csdn.net/qq_33501079/article/details/72354247

版权

基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js原生实现这个功能。由于刚开始接触js。刚开始拿着这题是蒙蔽的。也百度了些资料。知道大概过程应该是这样的：

（1）设计一个总的框架

（2）对选项卡标题设置样式

（3）对文本内容设置样式

（4）事件触发

大概按照这个思路可以写出这个实现。但是问题来了。怎样实现下图红色圈的功能：

刚开始实现的时候。红色圈总是有条线。我一直以为有什么特定的代码可以处理。最后不知怎么突然想到我怎么不使用白色覆盖这一部分呢？然后成功了。下面给代码。

代码分三个部分HTML、JAVASCRIPT、CSS

HTML

<!DOCTYPE html>
<html>
<head>
	<title>选项卡切换</title>
	<link rel="stylesheet" type="text/css" href="choose.css">
	<script type="text/javascript" src="choose.js"></script>
</head>
<body>
<div id="tab">
	<ul id="uli"><li class="active">房产</li><li>家居</li><li>二手房</li></ul>
	<div >
		 <ul >
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
	</div>
	<div class="hide">
		<ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
	</div>
	<div class="hide">
		 <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
	</div>
</div>
</body>
</html>

JavaScript

window.οnlοad=function(){
	var tab = document.getElementById("tab");//找到整个容器的标签
	var ul = document.getElementById("uli");//找到选项卡的标签
	var li = ul.getElementsByTagName("li");//找到选项卡的每个标签的集合
	var div = tab.getElementsByTagName("div");//找到每个标签卡下面对应的内容
	for(var i=0;i<li.length;i++){
		li[i].index = i;
		li[i].onmouseover = function(){
			for(var i=0;i<li.length;i++){
				li[i].className="";
			}
			this.className="active";
			for(var j=0;j<div.length;j++){
				div[j].className="hide";//设置每一个都不可见
			}
			div[this.index].className="show";
		}
	}

}

css同时也是这个实现的难点，可能我经验的原因，高度这些都是一个个慢慢调的。很费时间。

#tab{
	width: 400px;
	height: 350px;
	margin: 30px auto;
}
ul{
	list-style-type: none;
}
#uli{             /*选项卡标题进行设置*/
	border-bottom: 1px solid #8B4513;
	height: 36px;/*设置选项卡标题的总体框架*/
}
#uli li{
	display: inline-block;/*行内块元素*/
	width: 70px;
	line-height: 30px;
	text-align: center;
	border:1px solid #999;
	border-bottom: none;
	margin: 2px;
}
#uli li.active{
	border-top: 2px solid #8B4513;
	border-bottom: 4px solid #FFFFFF;
}
#tab div{
	border:1px solid #7396B8;
	border-top:none;
	margin-top: -16px;
}
#tab div li{//文本操作
	height: 2px;
	line-height: 30px;
}
.show{
	display: block;
}
.hide{
	display: none;
}