js的重点4:经过不同的li,显示不同的内容

  • 时间:
  • 浏览:
  • 来源:互联网

经过li时显示不同的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        ul.tab {
            display: flex;
        }

        .tab li {
            list-style: none;
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: #ecdede;
            text-align: center;
            cursor: pointer;
            border: 1px solid red;
        }

        .tab .active {
            background-color: pink;
        }

        .content_li {
            display: none;
        }


        .active {
            display: block;
        }

        .content a {
            text-decoration: none;
            color: #000;
        }

        .content_li {
            margin-left: -43px;
            width: 354px;
        }

        .content_li a {
            font-size: 14px;
            color: #333;
            line-height: 24px;
        }

        .content_li span {
            float: right;
            font-size: 13px;
            color: #999;
            line-height: 24px;
        }
    </style>
</head>

<body>
    <ul class="tab">
        <li>公示公告</li>
        <li>学术报告</li>
        <li>名家讲坛</li>
    </ul>
    <ul class="content">
        <li class="content_li active">
            <ul class="c3_content ">
                <li><img src="img/dian.png" alt=""><a href="#">诚聘海内外优秀人才</a> <span>02-15</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">江苏科技大学纪念上海船校搬迁镇...</a><span>09-18</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">任职前公示(2020.9.24)</a><span>09-24</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">关于开展2020年下半年第三周教职...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">关于举办江苏科技大学2020年高等...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【教务处】2020-2021学年第一学...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【公示】2020年江苏省高校微课比...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【教务处】关于2020年国庆节、中...</a><span>09-22</span></li>
            </ul>
        </li>
        <li class="content_li">
            <ul class="c3_content">

                <li><img src="img/dian.png" alt=""><a href="#">我的国家社科申报之路</a> <span>02-15</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">2021年国家社科基金申报动员大会...</a><span>09-18</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">国家社科基金后期资助项目申报政...</a><span>09-24</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">国家社科基金项目辅导讲座...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">凡体育,必文化...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">文学走出去的二元互补——以葛浩文...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">学术论文写作与高校青年教师科研...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">社会科学研究的两种思维与方法...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">文学走出去的二元互补——以葛浩文...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">管理学研究的新范式:QCA方法及...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">中日文化意识差异...</a><span>09-22</span></li>
            </ul>
        </li>
        <li class="content_li">
            <ul class="c3_content">
                <li><img src="img/dian.png" alt=""><a href="#">诚聘海内外优秀人才</a> <span>02-15</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">江苏科技大学纪念上海船校搬迁镇...</a><span>09-18</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">任职前公示(2020.9.24)</a><span>09-24</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">关于开展2020年下半年第三周教职...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">关于举办江苏科技大学2020年高等...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【教务处】2020-2021学年第一学...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【公示】2020年江苏省高校微课比...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【教务处】关于2020年国庆节、中...</a><span>09-22</span></li>
            </ul>
        </li>
        <li class="content_li">
            <ul class="c3_content">
                <li><img src="img/dian.png" alt=""><a href="#">诚聘海内外优秀人才</a> <span>02-15</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">江苏科技大学纪念上海船校搬迁镇...</a><span>09-18</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">任职前公示(2020.9.24)</a><span>09-24</span>
                </li>
                <li><img src="img/dian.png" alt=""><a href="#">关于开展2020年下半年第三周教职...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">关于举办江苏科技大学2020年高等...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【教务处】2020-2021学年第一学...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【公示】2020年江苏省高校微课比...</a><span>09-22</span></li>
                <li><img src="img/dian.png" alt=""><a href="#">【教务处】关于2020年国庆节、中...</a><span>09-22</span></li>
            </ul>
        </li>
    </ul>

    <script>
        //获取标题内容
        var tabs = document.querySelector('.tab').querySelectorAll('li');

        //设置自定义属性
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].setAttribute('data-index', i);
        }
        //获得内容
        var contents = document.querySelectorAll('.content_li')
        console.log(contents);
        tabs.forEach(e => {
            e.onmouseover = function () {
                //获得这个属性
                var index = this.dataset.index;
                contents.forEach(t => {
                    t.className = 'content_li'
                })
                contents[index].className = 'content_li active'
                tabs.forEach(e1 => {
                    e1.style.backgroundColor = ''
                })
                e.style.backgroundColor = 'pink'

            }
        })
    </script>
</body>

</html>

效果

在这里插入图片描述

本文链接http://xiahunao.cn/article/show-994281.html