利用JavaScript,实现卡片切换的效果

最新推荐文章于 2024-05-18 14:11:32 发布

芝麻馅的汉堡

最新推荐文章于 2024-05-18 14:11:32 发布

阅读量2.1k

点赞数 2

慕课网JS编程任务：利用JavaScript知识，实现选项卡切换的效果。

最终要实现的效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
     *{
         margin:0;
         padding:0;
         font:normal 12px "微软雅黑";
         color:#000000;}
     /*去掉列表前面的标记*/
     ul{list-style-type: none;}
     /*去掉超链接的下划线*/
     a{text-decoration: none;} 
     
     #tab-list{
         width:275px;height:190px;margin:20px auto;
     }
     /*设置标题底部边框，实体红色2px，高度为32px*/
     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
     /*设置标题内容为内联块状元素（不换行，可设置宽和高），宽度、行高、居中、边框：黑色实体1px、不要底边框、间隔为5*/
     #ul1 li{display: inline-block;
             width: 60px;
             line-height: 30px;
             text-align: center;
             border: 1px solid #999;
             border-bottom: none;
             margin-left: 5px;}
    /*选择鼠标指针浮动在其上的元素，并设置其样式*/
     #ul1 li:hover{cursor: pointer;}
     /*选择活动链接，并设置它的样式：*/
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
     .active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
     /*选项卡内容边框设置*/
     #tab-list div{border: 1px solid #7396B8;border-top: none;}
     #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
     .hide{
         display:none;
     }  
     .show{
         display:block;
     }
      
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    window.onload = function() {
        //获取相应的元素
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        
        for(var i = 0; i < aLi.length; i++) {
            //程序运行后，i的值始终为aLi.length+1，所以要保存一下索引，保证正确调用
            aLi[i].index = i;
            //this代表调用函数的对象
            aLi[i].onmouseover = function() {
                for(var i=0;i<aLi.length;i++){
                    aLi[i].className="";
                }
               this.className="active";
                for(var i=0;i<aDiv.length;i++){
                    aDiv[i].className="hide";
                }
                aDiv[this.index].className = "show";
            }        
        }
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->

<div id="tab-list">
    <ul id="ul1">
        <li >房产</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>

芝麻馅的汉堡

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript,实现卡片切换的效果

慕课网JS编程任务：利用JavaScript知识，实现选项卡切换的效果。最终要实现的效果：实践题 - 选项卡 /* CSS样式制作 */ *{ margin:0; padding:0; font:normal 12px "微软雅黑"; color:#0000
复制链接

扫一扫