用jquery,Bootstrap完成导航栏,侧边栏,以及内容页的切换的功能,大家必须有html,css,js的基础,不然案例中的代码可能看起来比较吃力,站长先让大家看效果:
html部分代码如下:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>前端文档</title> | |
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> | |
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> | |
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
</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 class="navbar-brand" href="https://www.denglu.net/"> | |
首页 | |
</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();
})
});
如果有不懂得地方请给站长留言!本文章来源于https://www.denglu.net/jquerybootstrap/ ,请大家尊重原创