Javascript CSS 选项卡效果的menu

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 117 阅读

文章标签：

本文通过一个简单的HTML页面展示了如何使用JavaScript实现元素之间的交互效果。通过鼠标悬停事件改变不同内容区块的显示状态，此示例有助于理解基本的网页布局及动态内容切换原理。

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html>

    <style>

    #card{

        margin:0 auto;

        width:252px;

    }

    #title{

        background:green;

        width:252px;

        height:25px;

    }

    #title ul{

        padding:0px;

        margin:0px;

    }

    #title li{

        width:80px;

        line-height:25px;    

        color:white;

        font-size:12px;

        float:left;

        list-style-type:none;

        border:2px solid white;

        text-align:center;

    }

    #title .titin{

        background:gray;

        border-color:gray;

    }

    #content{

        width:252px;

        height:150px;

        background:gray;

        color:white;

    }

    #content div{

        display:none;

        text-align:center;

    }

    #content .one{

        display:block;

    }

    </style>

    <body>

    <div id="card">

        <div id="title">

            <ul>

                <li onmouseover="show(0)" class="titin">第一项</li>

                <li onmouseover="show(1)">第二项</li>

                <li onmouseover="show(2)">第三项</li>

            </ul>

        </div>

        <div id="content">

            <div class="one">

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

                aaaaaaaaaaaaaaaaaaaaa</br>

            </div>

            <div>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

                bbbbbbbbbbbbbbbbbbbbb</br>

            </div>

            <div>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

                ccccccccccccccccccccc</br>

            </div>

        </div>

    </div>

    <script>

            var titles = document.getElementById("title").getElementsByTagName("li");

            var contents = document.getElementById("content").getElementsByTagName("div");

            function show(num){

                for(var i=0;i<titles.length;i++){

                    if(i==num){

                        titles[i].className="titin";

                        contents[i].className="one";

                    }else{

                        titles[i].className="";

                        contents[i].className="";

                    }

                }

            }

    </script>

    </body>

    </html>