在网页不发生跳转的前提下，编写代码实现如下图效果：
实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>导航</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <style type="text/css"> /*全局样式*/ *{ margin: 0; /*清除默认外边距*/ padding: 0; /*清除默认内边距*/ list-style: none; /*清除ul、li便签前面的点*/ } /*页面整体样式*/ .nav{ width: 700px; /*宽度700*/ margin: 0 auto; /*整体居中*/ margin-top: 20px; /*距离网页顶端20*/ border: 1px solid blue; /*加一个1px实线蓝色边框*/ } /*公共导航栏ul标签*/ ul{ margin-top: 30px; /*距离上部30px*/ } /*导航栏ul标签的li子标签*/ ul>li{ float: left; /*整体左浮动*/ margin-left: 60px; /*距离左边元素60*/ width: 100px; /*宽度100*/ height: 2em; /*高度两个字符*/ line-height: 2em; /*垂直居中*/ text-align: center; /*水平居中*/ border: 1px solid #efefef; /*加一个1px实线浅灰色边框*/ border-radius: 1em; /*加一个宽一个字符的圆角*/ } /*鼠标悬停到li标签时*/ .nav>ul>li:hover{ border: 1px solid pink; /*加一个1px实线粉色边框*/ } /*网页主体内容公共模块*/ .nav .one{ width: 600px; /*宽度60*/ margin:0 50px 50px; /*距离上部0px,距离左右50px，距离下部50px*/ } /*网页主体内容公共模块下的每个子模块公共样式*/ .nav .one>div{ padding: 20px; /*内边距20*/ } /*网页主体内容公共模块下的每个子模块公共样式*/ .nav .one>div>p{ line-height: 2em; /*垂直居中*/ text-indent: 2em; /*文本首行缩进2字符*/ } </style> </head> <body> <!-- 整体页面 --> <div class="nav"> <!-- 导航栏 --> <ul class="ul"> <!-- 导航栏子标签 --> <li> <span class="one_icon nav_btn" value="one">one</span> </li> <!-- 导航栏子标签 --> <li> <span class="one_icon nav_btn" value="two">two</span> </li> <!-- 导航栏子标签 --> <li> <span class="one_icon nav_btn" value="three">three</span> </li> <!-- 导航栏子标签 --> <li> <span class="one_icon nav_btn" value="four">four</span> </li> </ul> <!-- 换行使页面可视化效果更好 --> <br><br> <!-- 分页内容存放区 --> <div class="one"> <!-- 第一页内容 --> <div class="onePage page"> <p>百度、谷歌等网站之所以能很快在海量数据中找到需要的数据，得益于其搜索引擎，本文将介绍搜索引擎的基本知识及中文分词的方法，并通过demo演示如何进行数据检索。</p> </div> <!-- 第二页内容 --> <div class="twoPage page" style="display: none; background: pink"> <p>本文以示例的形式，由浅入深讲解Nginx限流相关配置，是对简略的 "官方文档" 的积极补充。 Nginx限流使用的是leaky bucket算法，如对算法感兴趣，可移步 "维基百科" 先行阅读。不过不了解此算法，不影响阅读本文。 </p> </div> <!-- 第三页内容 --> <div class="threePage page" style="display: none; color: teal"> <p>引言 网络上版本管理系统之争持久而喧嚣，依照声量来讲目前应该是Git占了较大的优势。不过我们本文的关注点在于代码的分支管理模型，因为大家无论是用SVN或者Git，目的是为了解决研发过程管理中的实际问题。我这里整理几种分支管理模型，这样大家可以对照自己的痛点选择合适的模型。</p> </div> <!-- 第四页内容 --> <div class="fourPage page" style="display: none; border: 1px solid #ccc"> <p>本文是内部的一次分享沉淀，偏向基础但是涉及了一些有意思的细节，文笔有限，才疏学浅，文中若有不正之处，万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。</p> </div> </div> </div> <!-- 不需要网页跳转，可分页显示内容的JS部分 --> <script type="text/javascript"> // 定义按钮函数 $('.nav_btn').click(function(){ // 获取按钮名字 var pageName = $(this).attr('value'); // 获取按钮类名 var pageClass = '.'+pageName+'Page'; // 背景跳转 $('.nav_btn').css('background',''); // 非按钮对应页面隐藏 $('.page').css('display','none'); // 按钮对应页面显示 $(pageClass).css('display','block'); }) </script> </body> </html>