原创文章:使用Jquery+Bootstrap完成导航栏，侧边栏，以及内容页的切换的功能

最新推荐文章于 2024-06-24 09:41:50 发布

置顶前端教程

最新推荐文章于 2024-06-24 09:41:50 发布

阅读量7.8k

点赞数 1

分类专栏： html 文章标签： Ĵq

本文链接：https://blog.csdn.net/weixin_42155710/article/details/83443798

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用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/ ，请大家尊重原创

前端教程

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
原创文章:使用Jquery+Bootstrap完成导航栏，侧边栏，以及内容页的切换的功能

用jquery,Bootstrap完成导航栏，侧边栏，以及内容页的切换的功能,大家必须有html,css,js的基础，不然案例中的代码可能看起来比较吃力，站长先让大家看效果:html部分代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ch...
复制链接

扫一扫