html+css+javascript编程实战项⽬及⼼得
部分图⽚和代码来⾃imooc
实战⽬的：⽤html+css+js实现上⾯的选项卡功能。
分析：
该选项卡⼤体上分成两部分：
⼀部分是ul，它的border-bottom是褐⾊的，ul⾥⾯有三个li，他们是inline-block的，才能⽔平排列，或者使⽤float：left属性也⾏。每个li有边框，字体居中排列，被选中的li的css发⽣变化，border-top变⾊加粗，同时⽤⽩⾊的border-bottom遮挡住ul的border-bottom，形成缺⼝的样⼦。
第⼆部分是下⾯的三个内容div，div的宽度与上⾯的ul相同。但这⾥注意div的宽度是width+左右border的宽度，所以在计算时要多加留神。css中，设置⼀个.show{display:block}，再设置⼀个.hide{display:none}，根据上⾯的ul中的li 被选中的情况，相应的控制其中⼀个的className是show，其他两个div的className都是hide，就能形成好似选中li，就能相应的显⽰不同div的样⼦。
js的控制策略：
当页⾯加载时，向ul的三个li中，分别绑定onclick⽅法，⽅法体中进⾏如下控制
对ul中的li，添加index属性，作为编号，每个li都有⾃⼰唯⼀的编号。
获得三个div，可以通过得到⽗节点的⼦节点数组的⽅式得到这三个div，那么他们在数组中的位置，就可以⽤上⼀条提到的编号与之相对应。
利⽤循环，将对应编号的div的className设置成show，其他的设置成hide即可。
具体代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{              /*清除所有默认的内外边距，设置字体格式*/
margin:0;
padding:0;
font-size:15px;
font-family:"微软雅⿊";
}
ul{
list-style-type:none;/* 所有的list选项都没有前⾯的点 */
}
a{
text-decoration:none;/* 所有的连接都没有下划线 */
color:black;
}
.main{  /*这是选项卡最外层包裹的div*/
width:310px; /*定义⼤⼩*/
height:200px;
margin:0 auto; /*这样能够居中*/
margin-top:15px;
}
#titleCard{  /*这是选项的ul*/
border-bottom:2px solid #8B4513; /*设置底边框*/html和css书籍推荐
width:302px; /*宽度，注意这个宽度的设置要与下⾯content宽度的设置相对应*/
height:32px; /*⾼度，这个⾼度要考虑ul的border-bottom能够与它⾥⾯的li的border-bottom重合的问题*/
}
#titleCard li{
display:inline-block; /*li本⾝是竖排的，这个属性能够让它们横着排列*/
border:1px solid black;
border-bottom:none;  /*⽆底边线，被选中的li才有底边线*/
width:70px;
height:30px;  /*这个⾼度与ul的⾼度相关，要能底边重合才⾏。*/
text-align:center;  /*⽂字⽔平居中*/
line-height:30px;  /*⽂字的⾏⾼与容器⾼度相同能够让⽂字垂直居中*/
margin-left:5px;
}
#titleCard li.liActive{  /*当li被选中时，把className设置成这个类名。注意这个类名的定义⽅式，必须把#titleCard li.加上才能够⽣效，我估计是因为要⽐总体的格            border-top:2px solid #8B4513; /*被选中的li上⾯的边框加粗，变⾊*/
border-bottom:2px solid white; /*下⾯的边框变⽩⾊，加粗，刚好能够覆盖住ul的底边，显得有缺⼝的样⼦*/
}
#titleCard li:hover{
cursor:pointer;
/*由于没有⽤<a>标签，所以这⾥⽤这个来让⿏标在移动到li上之后，能够变成点击⼿的样⼦*/
}
#content div{/*下⾯三个具体内容的div*/
width:300px; /*注意这个宽度与上⾯ul的宽度是对应的*/
height:150px;
border:1px solid green;/*左右边距的宽度要算到总宽度⾥⾯去*/
border-top:none; /*顶上⽆边框*/ }
#content div ul li {
line-height:2em;
text-indent:8px;/*⽂本缩进*/ }
.show{ display:block; /*显⽰*/ }
.hide{/*隐藏，并不占地⽅*/ display:none;  /*visibility:hidden 这种隐藏占地⽅*/}
</style> <script type="text/javascript"> // JS实现选项卡切换
//获得titleCard的⼦标签数组，该变量会⼀直存在，不会因为onload运⾏结束⽽消失，神奇！        var ElementById("titleCard").children;
//获得content的⼦标签数组，该变量会⼀直存在，不会因为onload运⾏结束⽽消失，神奇！        var ElementById("content").children; //alert();
for(var i=0;i<titleCardChildren.length;i++) {
//为每个titleCard的⼦标签添加index属性，记录该li的序号
titleCardChildren[i].index=i;
titleCardChildren[i].οnclick=function(){//为每个li添加onclick⽅法，每当这个li被点击时，就会运⾏这个⽅法⾥⾯的内容        for(var j=0;j<contentChildren.length;j++)//遍历content的⼦标签
{
contentChildren[j].className="hide";//将所有的content的⼦标签都隐藏
titleCardChildren[j].className="";//将所有titleCard的⼦标签的className值都去掉
}
contentChildren[this.index].className="show";//显⽰被点击的这个content⼦标签
titleCardChildren[this.index].className="liActive";//改变被点击的titleCard的⼦标签的css
}
}
}
</script>
</head>
<body><!-- HTML页⾯布局 -->
<div class="main">
<ul id="titleCard">
<li class="liActive">房产</li><li>家居</li><li>⼆⼿房</li>
</ul><!--titleCard end-->
<div id="content">
<div class="show">
<ul>
<li><a href="#">275万购昌平邻铁三居总价20万买⼀居</a></li>
<li><a href="#">200万内购五环三居 140万安家东三环</a></li>
<li><a href="#">北京⾸现零⾸付楼盘 53万购东5环50平</a></li>
<li><a href="#">京楼盘直降5000 中信府公园楼王现房</a></li>
</ul>
</div><!--show end-->
<div class="hide">
<ul>
<li><a href="#">40平出租屋⼤改造美少⼥的混搭⼩窝</a></li>
<li><a href="#">经典清新简欧爱家 90平⽼房焕发新⽣</a></li>
<li><a href="#">新中式的酷⾊温情 66平撞⾊活泼家居</a></li>
<li><a href="#">瓷砖就像选好⽼婆卫⽣间烟道的设计</a></li>
</ul>
</div><!--hide end-->
<div class="hide">
<ul>
<li><a href="#">通州豪华3居260万⼆环稀缺2居250w甩</a></li>
<li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="#">黄城根⼩学学区仅260万 121平70万抛!</a></li>
<li><a href="#">独家别墅280万苏州桥2居优惠价248万</a></li>
</ul>
</div><!--hide end-->
</div><!--content end-->
</div><!-- main end -->
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。