点击导航栏，样式发生改变，不刷新页面，只改变div中内容

最新推荐文章于 2024-02-29 20:00:27 发布

weixin_30892987

最新推荐文章于 2024-02-29 20:00:27 发布

阅读量3.4k

点赞数 7

文章标签： javascript 数据库 php ViewUI

原文链接：http://www.cnblogs.com/zhoupeng520/p/6679192.html

版权

1.呈现效果

2.主要代码

<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>

实习时为公司做官网时，用到的一个效果，记下以备随时查看。。。。。。。。。

主要是js部分的代码，其他根据自己的需求可以岁时改写。

转载于:https://www.cnblogs.com/zhoupeng520/p/6679192.html

weixin_30892987

关注

7
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
点击导航栏，样式发生改变，不刷新页面，只改变div中内容

1.呈现效果2.主要代码<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!DOCTYPE html><html><head> <title>test</title> <st...
复制链接

扫一扫