交互式网页布局与内容显示-优快云博客

本文链接：https://blog.youkuaiyun.com/The_over/article/details/129942270

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #title {
        overflow: hidden;
        margin: 100px auto;
        width: 900px;
        list-style: none;
    }

    #title li {
        float: left;
        width: 300px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        background-color: blue;
    }

    /* #title li:first-child {
        background-color: gold;
    } */

    #contents {
        list-style: none;
        width: 900px;
        margin: 50px auto;
    }

    #contents li {
        width: 900px;
        height: 500px;
        text-align: center;
        line-height: 500px;
        font-size: 50px;
    }

    #contents li:first-child {
        background-color: aqua;
    }

    #contents li:nth-child(2) {
        background-color: aquamarine;
        display: none;
    }

    #contents li:last-child {
        background-color: antiquewhite;
        display: none;
    }
</style>

<body>
    <div>
        <ul id="title">
            <li>标题一</li>
            <li>标题二</li>
            <li>标题三</li>
        </ul>
    </div>
    <div>
        <ul id="contents">
            <li>内容一</li>
            <li>内容二</li>
            <li>内容三</li>
        </ul>
    </div>

<script>
    var title = document.getElementById('title').getElementsByTagName('li')
    var contents = document.getElementById('contents').getElementsByTagName('li')
    for (let i = 0; i < title.length; i++) {
        title[i].onclick = function () {
            for (let j = 0; j < contents.length; j++) {
                if (i == j) {
                    this.style.backgroundColor = 'gold';
                    contents[j].style.display = "block"
                } else {
                    title[j].style.backgroundColor = 'blue';
                    contents[j].style.display = 'none';
                }
            }
        }
    }
</script>

js页面切换