JavaScript写选项卡

最新推荐文章于 2024-05-29 18:02:20 发布

冰公主

最新推荐文章于 2024-05-29 18:02:20 发布

阅读量307

点赞数 1

分类专栏： JS 前端

本文链接：https://blog.csdn.net/tfsun/article/details/108393767

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

效果图如下：

思路：

选项和内容用Tagname类似数组匹配
外层循环设置选项的index,若循环到触发了onclick事件的属性开始内层循环
内层循环把所有的选项和div设置成class="",class="hide"
最后把本标题和div设置成class="on",class=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        *{margin:0px;padding: 0px;font-size: 12px;}
        #SCard{
            width: 290px;
            height: 155px;
            margin: 20px;/*没用,我不想让它贴边而已*/
        }
        #SCard ul{
            height: 30px;
            display: block;
        }
        #SCard ul li{
            width: 70px;
            height: 28px;
            line-height: 28px;
            list-style: none;
            display: block;
            float: left;
            text-align: center;
            margin: 0 3px;
            border: 1px solid #336699;/*注意以下两行*/
            border-bottom: none;
        }
        #SCard ul li.on{                                        /*此处只用.on匹配不到?,必须有#SCard才能匹配*/
            border-top:2px solid #336699;
            border-bottom: 2px solid #fff;
        }
        #SCard div{
            height: 120px;
            width: 290px;
            border: 2px solid #000;
        }
        .hide{display: none;}
    </style>
    <script type="text/javascript">
        /*
        选项和内容用Tagname类似数组匹配
        外层循环设置选项的index,若循环到触发了onclick事件的属性开始内层循环
        内层循环把所有的选项和div设置成class="",class="hide"
        最后把本标题和div设置成class="on",class=""
         */
        window.onload=function () {
            var oSCard=document.getElementById("SCard");
            var oul=oSCard.getElementsByTagName("ul")[0];
            var oli=oul.getElementsByTagName("li");
            //返回HTMLCollection对象，此对象有length属性，nameItem()方法
            var odiv=oSCard.getElementsByTagName("div");
            var olen=oli.length;
            for(var i=0;i<olen;i++){
                oli[i].index=i;//.index向oli集合的每个对象添加index方法并赋值为i
                oli[i].onclick=function () {//.onclick向每个li标签添加点击事件
                    for(var n=0;n<olen;n++){
                        odiv[n].className="hide";
                        oli[n].className="";
                    }
                    this.className = "on";
                    odiv[this.index].className = "";
                }
            }
        }

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

1.document.getElementsByTagName()返回值是HTMLCollection对象，有length属性和namedItem()方法（用name特性获取集合中的项），使该对象可以按索引，按值访问。

2.上面代码向HTMLCollection对象添加了index属性

冰公主

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript写选项卡

效果图如下：思路：选项和内容用Tagname类似数组匹配外层循环设置选项的index,若循环到触发了onclick事件的属性开始内层循环内层循环把所有的选项和div设置成class="",class="hide"最后把本标题和div设置成class="on",class=""<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫

专栏目录