JS、Vue实现 baner、meun、content三布局 #215

TieMuZhen · 2022-09-06T08:12:06Z

功能

点击菜单栏内容随点击切换

JS实现

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body{
            height: 100%;
        }

        /* 清除浮动 */
        ul::after,
        div::after{
            content: '';
            display: block;
            clear: both;
        }

        #container{
            height: 100%;
            background-color: antiquewhite;
        }

        #banner{
            background-color: aqua;
        }

        #menu{
            background-color: red;
        }

        #menu ul {
            float: right;
        }

        #menu ul li{
            float: left;
            margin-right: 20px;
            list-style: none;
        }

        #main{
            background-color: yellow;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="container">   
        <div id="banner"></div>
        <div id="menu">
            <ul>
                <li><p class="A">a</p></li>
                <li><p class="B">b</p></li>
            </ul>
        </div> 
        <div id="main"></div> <!-- 中间主要的部分 main -->
    </div>
</body>
<script>
    var ele = document.getElementById("banner")
    ele.style.height = `${window.innerHeight}px`;

    document.querySelectorAll('.A')[0].addEventListener('click', function(){
        document.getElementById('main').innerText = document.querySelectorAll('.A')[0].innerText;
    })
    document.querySelectorAll('.B')[0].addEventListener('click', function(){
        document.getElementById('main').innerText = document.querySelectorAll('.B')[0].innerText;
    })
</script>
</html>

Vue实现

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body{
            height: 100%;
        }

        /* 清除浮动 */
        ul::after,
        div::after{
            content: '';
            display: block;
            clear: both;
        }

        #container{
            height: 100%;
            background-color: antiquewhite;
        }

        #banner{
            background-color: aqua;
        }

        #menu{
            background-color: red;
        }

        #menu ul {
            float: right;
        }

        #menu ul li{
            float: left;
            margin-right: 20px;
            list-style: none;
        }

        #main{
            background-color: yellow;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="container">   
        <div id="banner"></div>
        <div id="menu">
            <ul>
                <li><a @click.prevent="changeComp(A)">a</a></li>
                <li><a @click.prevent="changeComp(B)">b</a></li>
            </ul>
        </div> 
        <div id="main">
            <component :is="compName"></component>    
        </div> 
    </div>
</body>
<script>
    Vue.component('A', {
        template: '<h1>A</h1>'
    })

    Vue.component('B', {
        template: '<h1>B</h1>'
    })
    
    let v = new Vue({
        el: '#container',
        data: {
            compName: 'A'
        },
        methods: {
            changeComp: function(name){
                this.compName = name;
            }
        }
    })
</script>
</html>

The text was updated successfully, but these errors were encountered:

TieMuZhen added the CSS label Sep 6, 2022

TieMuZhen changed the title ~~JS baner、meun、content三布局~~ JS、Vue实现 baner、meun、content三布局 Sep 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS、Vue实现 baner、meun、content三布局 #215

JS、Vue实现 baner、meun、content三布局 #215

TieMuZhen commented Sep 6, 2022 •

edited

Loading

JS、Vue实现 baner、meun、content三布局 #215

JS、Vue实现 baner、meun、content三布局 #215

Comments

TieMuZhen commented Sep 6, 2022 • edited Loading

功能

JS实现

Vue实现

TieMuZhen commented Sep 6, 2022 •

edited

Loading