原創文章:使用Jquery+Bootstrap完成導航欄，側邊欄，以及內容頁的切換的功能
用jquery,Bootstrap完成導航欄，側邊欄，以及內容頁的切換的功能,大家必須有html,css,js的基礎，不然案例中的程式碼可能看起來比較吃力，站長先讓大家看效果:
html部分程式碼如下:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>前端文件</title> |
| </head> |
| <body> |
| <div> |
| <nav class="navbar navbar-default"> |
| <div class="container-fluid"> |
| <!-- Brand and toggle get grouped for better mobile display --> |
| <div class="navbar-header"> |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" |
| aria-expanded="false"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| 首頁 |
| </a> |
| </div> |
| <!-- Collect the nav links, forms, and other content for toggling --> |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> |
| <ul class="nav navbar-nav"> |
| <li class="active"><a href="#" data-toggle="tab">Html <span class="sr-only">(current)</span></a></li> |
| <li><a href="#" data-toggle="tab">CSS</a></li> |
| <li><a href="#" data-toggle="tab">JS</a></li> |
| <li><a href="#" data-toggle="tab">Jquery</a></li> |
| <li><a href="#" data-toggle="tab">bootstrap</a></li> |
| <li><a href="#" data-toggle="tab">Angular</a></li> |
| <li><a href="#" data-toggle="tab">Vue</a></li> |
| <li><a href="#" data-toggle="tab">React</a></li> |
| <li><a href="#" data-toggle="tab">Antd</a></li> |
| <li><a href="#" data-toggle="tab">webpack</a></li> |
| <li><a href="#" data-toggle="tab">Node</a></li> |
| <li><a href="#" data-toggle="tab">Mongodb</a></li> |
| <li><a href="#" data-toggle="tab">小程式</a></li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
| <!-- html部分 --> |
| <div class='table active denglu' id='html'> |
| <ul id="myTab" class="nav nav-tabs nav-stacked"> |
| <li class="active"> |
| <a href="#home" data-toggle="tab"> |
| HTML教程 |
| </a> |
| </li> |
| <li><a href="#ios" data-toggle="tab">HTML簡介</a></li> |
| <li><a href="#bianjiqi" data-toggle="tab">HTML編輯器</a></li> |
| <li class="dropdown"> |
| <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">VIP充值 |
| <b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> |
| <li><a href="#yue" tabindex="-1" data-toggle="tab">包月使用者</a></li> |
| <li><a href="#year" tabindex="-1" data-toggle="tab">包年使用者</a></li> |
| <li><a href="#all" tabindex="-1" data-toggle="tab">終身使用者</a></li> |
| </ul> |
| </li> |
| </ul> |
| <div id="myTabContent" class="tab-content"> |
| <div class="tab-pane fade in active" id="home"> |
| <div> |
| <h3>HTML 教程- (HTML5 標準)</h3> |
| <ul> |
| <li> |
| 超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。 |
| </li> |
| <li>您可以使用 HTML 來建立自己的 WEB 站點，HTML 執行在瀏覽器上，由瀏覽器來解析。</li> |
| <li>在本教程中，您將學習如何使用 HTML 來建立站點。</li> |
| <li>HTML 很容易學習！相信您能很快學會它！</li> |
| </ul> |
| <hr> |
| </div> |
| <div> |
| <h3>HTML文件的字尾名 |
| </h3> |
| <ul> |
| <li> |
| html |
| </li> |
| <li>htm</li> |
| <li>以上兩種字尾名沒有區別，都可以使用</li> |
| </ul> |
| <hr> |
| </div> |
| </div> |
| <div class="tab-pane fade" id="ios"> |
| <h3> |
| HTML 例項 |
| </h3> |
| </div> |
| <div class="tab-pane fade" id="bianjiqi"> |
| <h3> |
| HTML 編輯器推薦 |
| </h3> |
| <ul> |
| <li> |
| Notepad++：https://notepad-plus-plus.org/ |
| </li> |
| <li> |
| Sublime Text：https://www.sublimetext.com/ |
| </li> |
| <li> |
| VS Code：https://code.visualstudio.com/ |
| </li> |
| <li> |
| Webstorm Text：https://www.jetbrains.com/webstorm/ |
| </li> |
| </ul> |
| </div> |
| <div class="tab-pane fade" id="yue"> |
| <p>包月使用者,可以下載本站的頂級教程,每月20元,聯絡站長QQ:920726491</p> |
| </div> |
| <div class="tab-pane fade" id="year"> |
| <p>包年使用者,可以下載本站的頂級教程,每年188元,聯絡站長QQ:920726491</p> |
| </div> |
| <div class="tab-pane fade" id="all"> |
| <p>終身VIP使用者,一次付費588元,聯絡站長QQ:920726491</p> |
| </div> |
| </div> |
| </div> |
| <!-- css部分 --> |
| <div class='table denglu' id='css'> |
| <ul id="myTab" class="nav nav-tabs nav-stacked"> |
| <li class="active"> |
| <a href="#home1" data-toggle="tab"> |
| CSS教程 |
| </a> |
| </li> |
| <li><a href="#ios1" data-toggle="tab">CSS簡介</a></li> |
| <li class="dropdown"> |
| <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">CSS語法 |
| <b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> |
| <li><a href="#yue1" tabindex="-1" data-toggle="tab">包月使用者</a></li> |
| <li><a href="#year1" tabindex="-1" data-toggle="tab">包年使用者</a></li> |
| <li><a href="#all1" tabindex="-1" data-toggle="tab">終身使用者</a></li> |
| </ul> |
| </li> |
| </ul> |
| <div id="myTabContent" class="tab-content"> |
| <div class="tab-pane fade in active" id="home1"> |
| <h3>CSS 教程</h3> |
| <ul> |
| <li>通過使用 CSS 我們可以大大提升網頁開發的工作效率！</li> |
| <li>在我們的 CSS 教程中，您會學到如何使用 CSS 同時控制多重網頁的樣式和佈局。</li> |
| </ul> |
| </div> |
| <div class="tab-pane fade" id="ios1"> |
| <p>本站熱烈歡迎各大廣告主,聯絡我們進行廣告投放，以及友情連結</p> |
| <p>廣告投放最低起投時間一個月,每月費用不低於10元,每個廣告位價格不定，包年費用有優惠，優惠後每年費用即10個月</p> |
| </div> |
| <div class="tab-pane fade" id="yue1"> |
| <p>包月使用者,可以下載本站的頂級教程,每月20元,聯絡站長QQ:920726491</p> |
| </div> |
| <div class="tab-pane fade" id="year1"> |
| <p>包年使用者,可以下載本站的頂級教程,每年188元,聯絡站長QQ:920726491</p> |
| </div> |
| <div class="tab-pane fade" id="all1"> |
| <p>終身VIP使用者,一次付費588元,聯絡站長QQ:920726491</p> |
| </div> |
| </div> |
| </div> |
| </div> |
CSS部分程式碼:
body {
margin:0 auto;
background:#F5F5F5;
}
.navbar {
margin:10px 10px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #555;
background-color:#EED5B7;
border-bottom:1px solid #A4D3EE;
}
a.navbar-brand {
width: 70px;
height: 50px;
display:block;
padding: 0 0;
}
a.navbar-brand>img {
width: 70px;
height: 50px;
}
.table {
background:#F5F5F5;
display:flex;
flex:5;
}
#myTab {
margin:10px 10px;
flex:1;
border:1px solid hsla(59, 29%, 30%, 0.767);
}
#myTab>li {
width:100%;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
width:100%;
color: #fff;
cursor: default;
background-color:#A2B5CD;
border: 1px solid #BCD2EE;
border-bottom-color: #E0EEEE;
}
#myTabContent {
background:#F5F5F5;
margin:10px 10px;
flex:4;
border:1px solid #ccc;
}
#myTabContent div h3,#myTabContent div p {
margin-left:20px;
margin-top:6px;
font-size:14px;
color:#636363;
font-weight:700;
}
#myTabContent div h3 {
font-size:24px;
}
JS程式碼如下:
$(function(){
// 預設的active
$('.denglu#html').show();
$('.denglu#css').hide();
$('.navbar-nav>li').click(function(){
$('.denglu').hide().eq($(this).index()).show();
})
});