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

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

denglu.gifhtml部分代码如下:

  

<!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();

})

});

如果有不懂得地方请给站长留言!

未经允许不得转载:登录学堂 » 原创文章:使用Jquery+Bootstrap完成导航栏,侧边栏,以及内容页的切换的功能
微信公众号:这是个测试
关注我们,每天分享更多有趣的事儿,有趣有料!
10000+人已关注
分享到:
赞(0) 打赏站长

评论抢沙发

评论前必须登录!

切换注册

登录

忘记密码 ?

切换登录

注册