html+css+javascript编程实战项目及心得

来源：互联网发布：vs 变量已被优化掉编辑：程序博客网时间：2024/05/23 19:23

部分图片和代码来自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;/*设置底边框*/            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实现选项卡切换     window.onload = function(){

//获得titleCard的子标签数组，该变量会一直存在，不会因为onload运行结束而消失，神奇！         var titleCardChildren=document.getElementById("titleCard").children;

//获得content的子标签数组，该变量会一直存在，不会因为onload运行结束而消失，神奇！         var contentChildren=document.getElementById("content").children; //alert();         for(var i=0;i<titleCardChildren.length;i++) {

    //为每个titleCard的子标签添加index属性，记录该li的序号            titleCardChildren[i].index=i;

    titleCardChildren[i].onclick=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>

1 0