                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

勉强实现了，盒子好麻烦

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
            display: block;
            height: 31px;
            border-bottom: 3px solid #996633;
        }
        /* CSS样式制作 */
        li {
            list-style: none;
            float: left;
            width: 55px;
            height: 28px;
            margin-right: -1px;
            text-align: center;
            border: 1px solid black;
            border-bottom: none;
        }
        .content {
            position: absolute;
            top: 33px;
            width: 300px;
            height: 150px;
            background: white;
            line-height: 2em;
            padding: 5px;
            display: none;
            border: 1px solid black;
            border-top: none;
        }
    </style>
    <script type="text/javascript">
        // JS实现选项卡切换
        window.onload = function () {
            var ul1 = document.getElementById('ul1');
            var lis = ul1.getElementsByTagName('li');
            var divs = document.getElementsByClassName('content')
            for (let i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    divs[i].style.display = 'block'
                    lis[i].style.borderTop = '3px solid #996633'
                    lis[i].style.borderBottom = '3px solid #fff'
                    //获取同级元素 设置display
                    for (let j = 0; j < lis.length; j++) {
                        if (i != j) {
                            divs[j].style.display = 'none'
                            lis[j].style.borderTop = '1px solid black'
                            lis[j].style.borderBottom = 'none'
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<!-- HTML页面布局 -->
<div style="width: 312px;height: 200px">
    <ul id="ul1">
        <li style="border-top:3px solid #996633;border-bottom: 3px solid #fff">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div class="content" style="display: block;">
        275万购昌平邻铁三居&nbsp;总价20万买一居<br/>
        200万内购五环三居&nbsp;140万安家东三环<br/>
        北京首现零首付楼盘&nbsp;53万购东5环50平<br/>
        京楼盘直降5000&nbsp;中信府&nbsp;公园楼王现房
    </div>
    <div class="content">
        40平出租屋大改造&nbsp;美少女的混搭小窝<br/>
        经典清新简欧爱家&nbsp;90平老房焕发新生<br/>
        新中式的酷色温情&nbsp;66平撞色活泼家居<br/>
        瓷砖就像选好老婆&nbsp;卫生间烟道的设计
    </div>
    <div class="content">
        通州豪华3居260万 二环稀缺2居250w甩<br/>
        西3环通透2居290万 130万2居限量抢购<br/>
        黄城根小学学区仅260万 121平70万抛!<br/>
        独家别墅280万 苏州桥2居优惠价248万<br/>
    </div>
</div>
</body>
</html>

zqzqzq0225

2023-04-28

源自：JavaScript进阶篇 10-1

关注问题我要回答

197

操作

收起

1 回答

慕粉3414280
2023-05-06

 window.onload = function () {
      let text = [
        {
          title: '房产',
          content: '275万购昌平邻铁三居&nbsp;总价20万买一居<br/>200万内购五环三居&nbsp;140万安家东三环<br/北京首现零首付楼盘&nbsp;53万购东5环50平<br/>京楼盘直降5000&nbsp;中信府&nbsp;公园楼王现房'
        },
        {
          title: '家居',
          content: '40平出租屋大改造&nbsp;美少女的混搭小窝<br/>经典清新简欧爱家&nbsp;90平老房焕发新生<br/>新中式的酷色温情&nbsp;66平撞色活泼家居<br/瓷砖就像选好老婆&nbsp;卫生间烟道的设计'
        },
        {
          title: '二手房',
          content: '通州豪华3居260万 二环稀缺2居250w甩<br/>西3环通透2居290万 130万2居限量抢购<br/>黄城根小学学区仅260万 121平70万抛!<br/>独家别墅280万 苏州桥2居优惠价248万<br/>'
        }
      ]
      var ul1 = document.getElementById('ul1');
      var divs = document.getElementById('content')
      text.forEach((li, i) => {
        ul1.innerHTML += `<li data-content='${li.content}' class='${i == 0 ? "active" : ""}'>${li.title}</li>`
      })
      divs.innerHTML = text[0].content
      ul1.addEventListener('click', function (e) {
        [].slice.call(this.children).forEach(li => {
          li.className = ''
        })
        divs.innerHTML = e.target.dataset.content
        e.target.className = 'active'
      })

    }