JavaScript实现选项卡切换效果-CSDN博客

本文链接：https://blog.csdn.net/u013993319/article/details/51934356

本文将详细介绍如何使用JavaScript来创建一个动态的选项卡切换效果。通过理解DOM操作和事件监听，你可以实现不同内容间的平滑切换，增强网页交互体验。涉及到的关键技术包括HTML布局、CSS样式设计以及JavaScript逻辑实现。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        *{padding: 0;margin:0;}
        ul{list-style: none;}
        #container{
            width:400px;
            margin: 20px auto;
            position: relative;
        }
        #tab_t{

            height: 45px;
            width: 400px;
            font-size: 0;
        }
        #tab_t li{
            display: inline-block;
            width: 20%;
            font-size: 18px;
            font-family: "Microsoft YaHei", sans-serif;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border: 1px solid #999;
            border-bottom: none;
            margin:0px 5px;
            cursor: pointer;

        }


        #tab_t li.li_on{
            border-top: 2px solid #a86812;
            border-bottom: none;
            height: 48px;
            background: #fff;
        }
        #tab_c{
            position: absolute;
            top:47px;
            left: 0;
            height: 200px;
            width: 400px;
            border: 1px solid #259bcc;
            z-index: -1;
            display: block;
            border-top: 2px solid #a86812;
        }
        .hide{
            display: none;
        }

        #tab_c  p{
            line-height: 30px;
            font-size: 16px;
            font-family: "Microsoft YaHei", sans-serif;
            margin: 15px 0px 0px 5px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {
            //JS实现选项卡切换
            tab("tab_t","li","tab_c","div","onmouseover");
            function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
                var tab_t = document.getElementById(tab_t);
                var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
                var tab_c = document.getElementById(tab_c);
                var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
                var len = tab_t_li.length;
                var i=0;
                for(i=0; i<len; i++){
                    tab_t_li[i].index = i;
                    tab_t_li[i][evt] = function(){
                        for(i=0; i<len; i++){
                            tab_t_li[i].className = '';
                            tab_c_li[i].className = 'hide';
                        }
                        tab_t_li[this.index].className = 'li_on';
                        tab_c_li[this.index].className = '';
                    }
                }
            }
        }

    </script>

</head>
<body>
<div id="container">
    <!-- HTML页面布局 -->
    <ul id="tab_t">
        <li class="li_on">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div id="tab_c">
        <div>
            <p>275万购昌平邻铁三居 总价20万买一居<br/>
                200万内购五环三居 140万安家东三环<br/>
                北京首现零首付楼盘 53万购东5环50平<br/>
                京楼盘直降5000 中信府 公园楼王现房<br/>
            </p>
        </div>
        <div class="hide">
            <p>
                40平出租屋大改造 美少女的混搭小窝<br/>
                经典清新简欧爱家 90平老房焕发新生<br/>
                新中式的酷色温情 66平撞色活泼家居<br/>
                瓷砖就像选好老婆 卫生间烟道的设计
            </p>
        </div>
        <div class="hide">
            <p>
                通州豪华3居260万 二环稀缺2居250w甩<br/>
                西3环通透2居290万 130万2居限量抢购<br/>
                黄城根小学学区仅260万 121平70万抛!<br/>
                独家别墅280万 苏州桥2居优惠价248万<br/>
            </p>
        </div>
    </div>
</div>
</body>
</html>

JS 实现选项卡切换