js代码示例

最新推荐文章于 2022-06-29 13:16:43 发布

zhangFreedom

最新推荐文章于 2022-06-29 13:16:43 发布

阅读量1.1k

点赞数

分类专栏： js代码文章标签： js代码边框重合隐藏设计

原文链接：https://www.imooc.com/code/1912

版权

js代码专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现选项卡效果的方法。通过设置div的display属性，结合鼠标悬停事件，可以动态切换显示的内容。文章详细展示了如何利用CSS样式和JavaScript代码来创建响应式选项卡，使用户能够通过点击不同的标签来查看相应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果如下所示

在这里插入图片描述
**做法：**在javascript中，先把所有的div的display设置为none，然后在根据当前的数组里的索引值进行一个显示div的过程

<!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;}

     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}/* ul底边框设置2px的底边框线，充当下方div元素的上边框，ul 内容区高度32px*/
     #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}/* 设置li边框，无底边框，其内容区的底边和ul内容区底边重合，此时总高度31px=（内容区+上边框）  文本居中*/
     #ul1 li:hover{cursor: pointer;}/*鼠标悬浮形状*/
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}/*鼠标悬浮时，设置下边框白色2px和上边框2px棕红色，总高度34px，*/

     #tab-list div{border: 1px solid #7396B8;border-top: none;}
     #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
     
     .show{display: block;}.hide{display: none;}
    </style>
    <script type="text/javascript">
         
    window.onload = function() {//函数在DOM加载完成立即执行
        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++) {
            aLi[i].index = i;//为下面的this.index做准备。即为当前的鼠标悬停元素设置访问索引
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }        
        }
    }
    
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <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>