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

最新推荐文章于 2024-08-10 10:42:27 发布

JDecay

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量1w

点赞数 12

文章标签：选项卡 javascript html css

部分图片和代码来自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].ο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>