实现菜单导航栏点击局部内容随之改变的效果的几种方法

方法1创建多个div,使用display,控制局部div是否隐藏和显示。这种方法操作简单，只需要掌握html,css,js的基本知识便可以实现。适合前端学习的新手实现导航栏点击局部改变内容的效果。但是这会使得页面的代码极为庞大，并且不易于代码得管理。示例1：（其中引用了bootstrap，对样式的布局可以自行根据需要修改）<!DOCTYPE html><html lang="en

小羊摸鱼

8336人浏览 · 2021-11-29 13:32:24

小羊摸鱼 · 2021-11-29 13:32:24 发布

方法1
创建多个div,使用display,控制局部div是否隐藏和显示。这种方法操作简单，只需要掌握html,css,js的基本知识便可以实现。适合前端的初学者实现导航栏点击局部改变内容的效果。但是这会使得页面的代码极为庞大，并且不易于代码得管理。

示例代码：（其中引用了bootstrap，对样式的布局可以自行根据需要修改）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法1</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        .contern{
            width: 100%;
            height: 500px;
            border: 5px solid black;
            font-size: 30px;
        }
        .dbtn1,.dbtn2,.dbtn3{
            display: none;
        }
    </style>
</head>
    <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action btn1">btn1</button>
        <button type="button" class="list-group-item list-group-item-action btn2">btn2</button>
        <button type="button" class="list-group-item list-group-item-action btn3">btn3</button>
    </div>
    <div class="contern">
        <div class="dbtn1">btn1</div>
        <div class="dbtn2">btn2</div>
        <div class="dbtn3">btn3</div>
    </div>
</body>
<script>
    var dbtn1 = document.querySelector(".dbtn1");
    var dbtn2 = document.querySelector(".dbtn2");
    var dbtn3 = document.querySelector(".dbtn3");
    var btn1 = document.querySelector(".btn1");
    var btn2 = document.querySelector(".btn2");
    var btn3 = document.querySelector(".btn3");
    btn1.onclick = function(){
        dbtn1.style.display = "block";
        dbtn2.style.display = "none";
        dbtn3.style.display = "none";
    }
    btn2.onclick = function(){
        dbtn2.style.display = "block";
        dbtn1.style.display = "none";
        dbtn3.style.display = "none";
    }
    btn3.onclick = function(){
        dbtn3.style.display = "block";
        dbtn1.style.display = "none";
        dbtn2.style.display = "none";
    }
</script>
</html>

在这里插入图片描述
方法2：
使用iframe标签，通过改变iframe标签的src来达到改变局部内容的效果。

示例代码：(btn1.html,btn2.html,btn3.html 三个页面内容自行编写相应内容)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法1</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action btn1">btn1</button>
    <button type="button" class="list-group-item list-group-item-action btn2">btn2</button>
    <button type="button" class="list-group-item list-group-item-action btn3">btn3</button>
</div>
<iframe src="./btn1.html" frameborder="0"></iframe>
<script>
    var btn1 = document.querySelector(".btn1");
    var btn2 = document.querySelector(".btn2");
    var btn3 = document.querySelector(".btn3");
    var iframe = document.querySelector("iframe");
    btn1.onclick = function(){
        iframe.src = "./btn1.html"
    }
    btn2.onclick = function(){
        iframe.src = "./btn2.html"
    }
    btn3.onclick = function(){
        iframe.src = "./btn3.html"
    }
</script>
</body>

</html>

在这里插入图片描述

方法3：
使用ajax来对页面的内容进行请求，然后把请求到的内容加载到相应的div中。

示例代码：(btn1.html,btn2.html,btn3.html 三个页面内容自行编写相应内容)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法3</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="./jquery.js"></script>
</head>
    <div class="list-group">
        <a href="#" onclick="a('./btn1.html')" class="list-group-item list-group-item-action btn1">btn1</a>
        <a href="#" onclick="a('./btn2.html')" class="list-group-item list-group-item-action btn2">btn2</a>
        <a href="#" onclick="a('./btn3.html')" class="list-group-item list-group-item-action btn3">btn3</a>
    </div>
    <div id="center"></div>
    <script>
        function a(url){
            $.get(url,function(data){
                $("#center").html(data)
            });
            console.log("hhhh");
    	}
    </script>
</body>

</html>