注册

找回密码

账号  

密码  

<<返回列表下一个上一个收藏 打印本文 复制本文地址

577

查看

0

回复
主题：导航切换效果代码 [收藏主题]  
lan988 当前离线

288

主题

210

广播

31

粉丝
添加关注
级别:管理员
用户积分:182 分
登录次数:1101 次
注册时间:2007-3-30
最后登录:2024-11-27
lan988 发表于：2023-11-14 21:18:45   | 只看该作者 查看该作者主题 楼主 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 1000px;
            height: 1000px;
            margin: 0 auto;

        }
        .test ul{
            list-style: none;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .test ul li{
            width: 100px;
            float: left;
            text-align: center;
        }
        .test p{
            display: block;
            cursor: pointer;
        }
        .box{
            width: 1000px;
            height: 300px;
            background: #E7FB4A;
            clear: both;
        }
        #box1{
            background: #53FD5D;
        }
        #box2{
            background: #F4FD53;
            display: none;

        }
        #box3{
            background: #FD7253;
            display: none;
        }
        .test p:hover{
            background: #4874FF;
        }
        .btn1{
            background: : #5C47F3;
            display: block;
        }
        .btn2{
            background: #4874FF;
            display: block;
        }
    </style>
</head>
<body>
    <div class="test">
        <ul>
            <li><p id="1" class="btn2">导航一</p></li>
            <li><p id="2" class="btn1">导航二</p></li>
            <li><p id="3" class="btn1">导航三</p></li>
        </ul>
        <div class="box" id="box1">这是第一个导航显示的内容</div>
        <div class="box" id="box2">这是第二个导航显示的内容</div>
        <div class="box" id="box3">这是第三个导航显示的内容</div>
    </div>
    <script type="text/javascript">

        window.onload = function(){
            var arr = document.getElementsByTagName('p');
            for(var i = 0;i<arr.length;i++){
                arr[i].onclick = function(){
                    if (this.id == '1' )
                    {
                        document.getElementById("box1").style.display = 'block' ;
                        document.getElementById("box2").style.display = 'none' ;
                        document.getElementById("box3").style.display = 'none' ;
                    }
                    else if(this.id == '2')
                    {
                        document.getElementById("box1").style.display = 'none' ;
                        document.getElementById("box2").style.display = 'block' ;
                        document.getElementById("box3").style.display = 'none' ;
                    }
                    else{
                        document.getElementById("box1").style.display = 'none' ;
                        document.getElementById("box2").style.display = 'none' ;
                        document.getElementById("box3").style.display = 'block' ;
                    }
                    //this是当前激活的按钮，在这里可以写对应的操作
                    if(this.className == 'btn1'){
                        this.className = 'btn2';
                        var name = this.id;
                        var btn = document.getElementsByClassName('btn2');
                        for(var j=0;j<btn.length;j++){
                            if(btn[j].id!=name){
                                btn[j].className = 'btn1';
                            }
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>
 
分享到252
 
专业从事风水，命理，择日，取名等。
本站是提供个人知识管理的网络存储空间，所有非本站原创内容均由用户发布，不代表本站观点。如发现有害或侵权内容，请点击这里 举报
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
＜下一主题 | 上一主题 ＞
<< 返回列表
风水自学网有限公司 © 2016-2025 版权所有 页面执行0.15430秒 powered by KesionCMS 9.0