                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /基于bootstrap的網(wǎng)頁開發(fā)

關(guān)于菜單定位只能定位第一個(gè)標(biāo)簽頁，其他標(biāo)簽頁無法定位的問題

???<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>切換導(dǎo)航</span>
????????<span></span>
????????<span></span>
????????<span></span>????????
??????</button>
??????<a?href="#">現(xiàn)代瀏覽器博物館</a>
????</div>
????<div?class="collapse?navbar-collapse"?id="demo-navbar">
??????????<ul?class="nav?navbar-nav">?
????????????<li><a?href="#">綜述</a></li>
????????????<li><a?href="#">簡(jiǎn)述</a></li>
????????????<li><a?href="#"?data-toggle="dropdown">特點(diǎn)<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">關(guān)于</a></li>
??????????</ul>
????</div>
??</div>
</nav><!--導(dǎo)航條結(jié)束-->


<!--?標(biāo)簽頁開始?-->
??<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瀏覽器，是一個(gè)由Google（谷歌）公司開發(fā)的網(wǎng)頁瀏覽器。該瀏覽器是基于其他開源軟件所撰寫，包括WebKit，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡(jiǎn)單且有效率的使用者界面。</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，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個(gè)開源網(wǎng)頁瀏覽器，
????????????????????????使用Gecko引擎（非ie內(nèi)核），支持多種操作系統(tǒng)如Windows、Mac和linux。</p>
????????????????</div>
????????????</div>
????</div>

????<div??id="tab-safari">
????????????<div?class="row?feature">
????????????????<div>
????????????????????<h2>Safari?<span>Mac用戶首選</span></h2>
????????????????????<p>Safari，是蘋果計(jì)算機(jī)的最新操作系統(tǒng)Mac?OS?X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。
????????????????????????Safari在2003年1月7日首度發(fā)行測(cè)試版，并成為Mac?OS?X?v10.3與之后的默認(rèn)瀏覽器，也是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公司制作的支持多頁面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器。?是跨平臺(tái)瀏覽器可以在Windows、Mac和Linux三個(gè)操作系統(tǒng)平臺(tái)上運(yùn)行。</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版本)，簡(jiǎn)稱IE，是美國微軟公司推出的一款網(wǎng)頁瀏覽器。它采用的排版引擎(俗稱內(nèi)核)為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>&copy;2017HiHaNet</p>
??</footer>
</div>
<!--?標(biāo)簽頁結(jié)束?-->
<!--?彈出框開始?-->
<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">&times;</span></button>
????????<h4>關(guān)于我們</h4>
??????</div>
??????<div>
????????<p>關(guān)于我們，請(qǐng)撥打我們的客服熱線：110</p>
??????</div>
??????<div>
????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">OK</button>
??????</div>
????</div>
??</div>
</div>
<!--?彈出框結(jié)束?-->
????<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>