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

用jquery,Bootstrap完成导航栏，侧边栏，以及内容页的切换的功能,大家必须有html,css,js的基础，不然案例中的代码可能看起来比较吃力，站长先让大家看效果:

html部分代码如下:

  

	aria-expanded="false">
	Toggle navigation
	首页
	Html (current)
	CSS
	JS
	Jquery
	bootstrap
	Angular
	Vue
	React
	Antd
	webpack
	Node
	Mongodb
	小程序
	HTML教程
	HTML简介
	HTML编辑器
	VIP充值
	包月用户
	包年用户
	终身用户
	HTML 教程- (HTML5 标准)
	超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
	您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
	在本教程中，您将学习如何使用 HTML 来创建站点。
	HTML 很容易学习！相信您能很快学会它！
	HTML文档的后缀名
	html
	htm
	以上两种后缀名没有区别，都可以使用
	HTML 实例
	HTML 编辑器推荐
	Notepad++：https://notepad-plus-plus.org/
	Sublime Text：https://www.sublimetext.com/
	VS Code：https://code.visualstudio.com/
	Webstorm Text：https://www.jetbrains.com/webstorm/
	包月用户,可以下载本站的顶级教程,每月20元,联系站长QQ:920726491
	包年用户,可以下载本站的顶级教程,每年188元,联系站长QQ:920726491
	终身VIP用户,一次付费588元,联系站长QQ:920726491
	CSS教程
	CSS简介
	CSS语法
	包月用户
	包年用户
	终身用户
	CSS 教程
	通过使用 CSS 我们可以大大提升网页开发的工作效率！
	在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
	本站热烈欢迎各大广告主,联系我们进行广告投放，以及友情链接
	广告投放最低起投时间一个月,每月费用不低于10元,每个广告位价格不定，包年费用有优惠，优惠后每年费用即10个月
	包月用户,可以下载本站的顶级教程,每月20元,联系站长QQ:920726491
	包年用户,可以下载本站的顶级教程,每年188元,联系站长QQ:920726491
	终身VIP用户,一次付费588元,联系站长QQ:920726491

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

​