<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target= "#demo-navbar">
<span>切换导航</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">现代浏览器博物馆</a>
</div>
<div class="collapse navbar-collapse" id="demo-navbar">
<ul class="nav navbar-nav">
<li><a href="#">综述</a></li>
<li><a href="#">简述</a></li>
<li><a href="#" data-toggle="dropdown">特点<span></span></a>
<ul role="menu" aria-labelledby="dropdownMenuDivider">
<li><a href="#tab-chrome">Chrome</a></li>
<li><a href="#tab-firefox">Firefox</a></li>
<li><a href="#tab-safari">Safari</a></li>
<li><a href="#tab-opera">Opera</a></li>
<li><a href="#tab-ie">IE</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#a">关于</a></li>
</ul>
</div>
</div>
</nav><!--导航条结束-->
<!-- 标签页开始 -->
<ul class="nav nav-tabs" role="tablist" id="feature-tab" id="tab-list">
<li><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
<li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
<li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
<li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
<li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
</ul>
<div>
<div class="tab-pane active" id="tab-chrome">
<div class="row feature">
<div>
<h2>Google Chrome <span>使用最广的浏览器</span></h2>
<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/chrome-logo.jpg" alt="fhrome">
</div>
</div>
</div>
<div id="tab-firefox">
<div class="row feature">
<div>
<img class="feature-image img-responsive" src="images/firefox-logo.jpg" alt="firefox">
</div>
<div>
<h2>Mozilla Firefox <span>美丽的狐狸</span>
</h2>
<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
</div>
</div>
</div>
<div id="tab-safari">
<div class="row feature">
<div>
<h2>Safari <span>Mac用户首选</span></h2>
<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/safari-logo.jpg" alt="safari">
</div>
</div>
</div>
<div id="tab-opera">
<div class="row feature">
<div>
<img class="feature-image img-responsive" src="images/opera-logo.jpg" alt="0pera">
</div>
<div>
<h2>Opera <span>小众但易用</span>
</h2>
<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</p>
</div>
</div>
</div>
<div id="tab-ie">
<div class="row feature">
<div>
<h2>IE <span>你懂的</span></h2>
<p>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/ie-logo.jpg" alt="ie">
</div>
</div>
</div>
</div>
<hr>
<footer>
<p><a href="#top">回到顶部</a></p>
<p>©2017HiHaNet</p>
</footer>
</div>
<!-- 标签页结束 -->
<!-- 弹出框开始 -->
<div class="modal fade" tabindex="-1" role="dialog" id="about">
<div role="document">
<div>
<div>
<button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4>关于我们</h4>
</div>
<div>
<p>关于我们，请拨打我们的客服热线：110</p>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<!-- 弹出框结束 -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo-navbar .dropdown-menu a").click(function(){
var href = $(this).attr("href");
$("#tab-list a[href = '#"+href+" ']").tab('show');
});
});
</script>
</body>
</html>
