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

最新推荐文章于 2024-04-26 11:45:47 发布

小羊摸鱼

最新推荐文章于 2024-04-26 11:45:47 发布

阅读量8.8k

点赞数 22

分类专栏：前端学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_46102597/article/details/121429973

版权

前端学习专栏收录该内容

16 篇文章 2 订阅

订阅专栏

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

在这里插入图片描述

在这里插入图片描述
方法4：
使用Vue框架。(知识储备对组件、插槽、路由的理解)；（无刷新单页面局部内容改变）。
效果展示：

方法4的代码（百度网盘）
提取码：4j4x
（使用代码时需要安装node环境，搭建vue-cli脚手架，还需要安装vue-router路由插件）

目前我所学习到的导航栏点击内容的实现方法我所能实现的是以上四种，有许多不足之处还请多多指教。

小羊摸鱼

关注

22
点赞
踩
84

收藏

觉得还不错? 一键收藏
7
评论
实现菜单导航栏点击局部内容随之改变的效果的几种方法

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

扫一扫