求問大佬點擊標題欄后只顯示第一個頁面Chrome，后面的沒反應。。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>媒體對象-媒體對象的嵌套</title>
<link rel="stylesheet">
? ? <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
? ? <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
? ? <style type="text/css">
? ? body{
? ? padding-top:50px;
? ? padding-bottom: 50px;
? ? }
? ? .carousel{
? ? height: 500px;
? ? background-color: #000;
? ? margin-bottom: 60px;
? ? }
? ? .carousel .item{
? ? height: 500px;
? ? background-color: #000;
? ? }
? ? .carousel .item img{
? ? width: 100%;
? ? }
? ? .carousel-caption p{
? ? margin-bottom: 20px;
? ? font-size: 20px;
? ? line-height: 1.8;
? ? }
? ? #summary-container .col-md-4{
? ? text-align: center;
? ? }
? ? #summary-container .col-md-4 img{
? ? width: 80%;
? ? height: 80%;
? ? }
? ? hr.divider{
? ? margin: 40px;
? ? }
? ? .feature{
? ? padding: 30px 0;
? ? }
? ? .feature-heading{
? ? font-size: 50px;
? ? color:#2a6496;
? ? margin-top: 120px;
? ? }
? ? .feature-heading .text-muted{
? ? font-size: 28px;
? ? color: #999;
? ? }
? ? </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">現代瀏覽器博物館</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">綜述</a></li>
<li><a href="#">簡述</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">特點<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#feature-tab" data-tab="#tab-chrome">Chrome</a></li>
<li><a href="#feature-tab" data-tab="#tab-firefox">Firefox</a></li>
<li><a href="#feature-tab" data-tab="#tab-chrome">Opera</a></li>
<li><a href="#feature-tab" data-tab="#tab-safari">Safari</a></li>
<li><a href="#tab-ie">IE</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about">關于</a></li>
</ul>
</div>
</div>
</nav>
<!-- carousel:滾動組件? ? ?廣告輪播-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">?
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/chrome-big.jpg" alt="1 slide">
<div class="container">
<div class="carousel-caption">
<h1>Chorme</h1>
<p>Google Chrome，又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。</p>
<p>
<a class="btn btn-lg btn-primary" role="button" target="_blank">點我下載</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/firefox-big.jpg" alt="2 slide">
<div class="container">
<div class="carousel-caption">
<h1>Firefox</h1>
<p>Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網頁瀏覽器。</p>
<p>
<a class="btn btn-lg btn-primary" target="_blank" role="button">點我下載</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/safari-big.jpg" alt="3 slide">
<div class="container">
<div class="carousel-caption">
<h1>Safari</h1>
<p>Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器。</p>
<p>
<a class="btn btn-lg btn-primary" target="_blank" role="button">點我下載</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/opera-big.jpg" alt="4 slide">
<div class="container">
<div class="carousel-caption">
<h1>Opera</h1>
<p>Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網絡瀏覽器。</p>
<p>
<a class="btn btn-lg btn-primary" target="_blank" role="button">點我下載</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/ie-big.jpg" alt="5 slide">
<div class="container">
<div class="carousel-caption">
<p>IE</p>
<p>Internet Explorer，簡稱 IE，是微軟公司推出的一款網頁瀏覽器。</p>
<p>
<a class="btn btn-lg btn-primary" target="_blank" role="button">點我下載</a>
</p>
</div>
</div>
</div>
</div>
<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一頁</span>
</a>
<a href="#carousel-example-generic" class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一頁</span>
</a>
</div>
<!-- 主要內容 -->
<div class="container summary">
<!--簡介-->
<div class="row" id="summary-container">
<div class="col-md-4">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\chrome-logo.jpg" class="img-circle" alt="chrome">
<h2>Chrome</h2>
<p>Google Chrome，又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。</p>
<p>
<a class="btn btn-default" href="#" role="button">點我下載</a>
</p>
</div>
<div class="col-md-4">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\Firefox-logo.jpg" class="img-circle" alt="firefox">
<h2>Firefox</h2>
<p>Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網頁瀏覽器。</p>
<p>
<a class="btn btn-default" href="#" role="button">點我下載</a>
</p>
</div>
<div class="col-md-4">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\safari-logo.jpg" class="img-circle" alt="safari">
<h2>Safari</h2>
<p>Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器。</p>
<p>
<a class="btn btn-default" href="#" role="button">點我下載</a>
</p>
</div>
</div>
<!-- 特性 -->
<hr class="feature-divider">
<!--標簽頁-->
<ul class="nav nav-tabs" role="tablist" id="feature-tab">
<li class="active"><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 class="tab-content">
<div class="tab-pane active" id="tab-chrome">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">
"Google Chrome"<span class="text-muted">使用最廣的瀏覽器</span>
</h2>
<p class="lead">
Google Chrome，又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。
? ? ? ? ? ? ? ? ? ? ? ? 該瀏覽器是基于其他開源軟件所撰寫，包括WebKit，目標是提升穩定性、速度和安全性，并創造出簡單且有效率的使用者界面。
</p>
</div>
<div class="col-md-5">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\chrome-logo.jpg" class="feature-image img-responsive" alt="Chrome">
</div>
</div>
</div>
<div class="tab-pane" id="tab-firefox">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">
"Mozilla Firefox"<span class="text-muted">美麗的狐貍</span>
</h2>
<p class="lead">
Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網頁瀏覽器，
? ? ? ? ? ? ? ? ? ? ? ? 使用Gecko引擎（非ie內核），支持多種操作系統如Windows、Mac和linux。
</p>
</div>
<div class="col-md-5">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\firefox-logo.jpg" class="feature-image img-responsive" alt="Firefox">
</div>
</div>
</div>
<div class="tab-pane" id="tab-safari">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">
"Safari"<span class="text-muted">Mac用戶首選</span>
</h2>
<p class="lead">
Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運算核心。
? ? ? ? ? ? ? ? ? ? ? ? Safari在2003年1月7日首度發行測試版，并成為Mac OS X v10.3與之后的默認瀏覽器，也是iPhone與IPAD和iPod touch的指定瀏覽器。
</p>
</div>
<div class="col-md-5">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\safari-logo.jpg" class="feature-image img-responsive" alt="Safari">
</div>
</div>
</div>
<div class="tab-pane" id="tab-opera">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">
"Opera"<span class="text-muted">小眾但易用</span>
</h2>
<p class="lead">
Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網絡瀏覽器。
? ? ? ? ? ? ? ? ? ? ? ? 是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統平臺上運行。.
</p>
</div>
<div class="col-md-5">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\opera-logo.jpg" class="feature-image img-responsive" alt="Opera">
</div>
</div>
</div>
<div class="tab-pane" id="tab-ie">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading">
"IE"<span class="text-muted">你懂得</span>
</h2>
<p class="lead">
Internet Explorer，原稱Microsoft Internet Explorer(6版本以前)和Windows Internet
? ? ? ? ? ? ? ? ? ? ? ? Explorer(7，8，9，10版本)，
? ? ? ? ? ? ? ? ? ? ? ? 簡稱IE，是美國微軟公司推出的一款網頁瀏覽器。它采用的排版引擎(俗稱內核)為Trident。
</p>
</div>
<div class="col-md-5">
<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\ie-logo.jpg" class="feature-image img-responsive" alt="IE">
</div>
</div>
</div>
</div>
<hr class="divider">
<footer>
<p class="pull-right">
<a href="#top">回到頂部</a>
</p>
<p>@ 2018</p>
</footer>
</div>
<!-- 彈出框 -->
<div class="modal fade" id="about">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×<span class="sr-only">關閉</span></span>
</button>
<h4 class="modal-title">關于</h4>
</div>
<div class="modal-body">
<p>慕課網隸屬于北京慕課科技中心(有限合伙)，是一家從事互聯網免費教學的網絡教育公司。秉承“開拓、創新、公平、分享”的精神，
? ? ? ? ? ? ? ? ? ? ? ? 將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">了解</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#bs-example-navbar-collapse-1 .dropdown-menu a").click(function(e){
var href = $(this).attr("href");
$("#tab-list a[href='" + href + "']").tab("show");
e.preventDefault();
? ? $(document).scrollTop($(href).offset().top - 120);
});
});
</script>
</body>
</html>
2018-03-21
已解決，標簽頁id錯誤