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

来源：互联网发布：linux 查看死机日志编辑：程序博客网时间：2024/06/06 04:14

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.onload=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;}

阅读全文

0 0