在网页不跳转的前提下更新网页内容（局部刷新）
生活随笔
收集整理的這篇文章主要介紹了
在网页不跳转的前提下更新网页内容（局部刷新）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在網頁不發生跳轉的前提下，編寫代碼實現如下圖效果：
實現代碼如下：
<!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">
<p>本文以示例的形式，由淺入深講解Nginx限流相關配置，是對簡略的 "官方文檔" 的積極補充。 Nginx限流使用的是leaky bucket算法，如對算法感興趣，可移步 "維基百科" 先行閱讀。不過不了解此算法，不影響閱讀本文。 </p>
</div>
<!-- 第三頁內容 -->
<div class="threePage page">
<p>引言 網絡上版本管理系統之爭持久而喧囂，依照聲量來講目前應該是Git占了較大的優勢。不過我們本文的關注點在于代碼的分支管理模型，因為大家無論是用SVN或者Git，目的是為了解決研發過程管理中的實際問題。我這里整理幾種分支管理模型，這樣大家可以對照自己的痛點選擇合適的模型。</p>
</div>
<!-- 第四頁內容 -->
<div class="fourPage page">
<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>
總結
以上是生活随笔為你收集整理的在网页不跳转的前提下更新网页内容（局部刷新）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： eclipse插件安装，万能方法
- 下一篇： 京东方：LCD 产品将有机会迎来量价齐升