標(biāo)簽頁(yè)會(huì)切換，但沒(méi)有定位，什么原因？
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <title>現(xiàn)代瀏覽器博物館</title>
? ? <link href="css/bootstrap.min.css" rel="stylesheet">
? ? <!--[if lt IE 9]>
? ? ? <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
? ? ? <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
? ? <![endif]-->
<style>
body{
padding-top:50px;
padding-bottom:30px;
}
.carousel{
height: 500px;
background-color:#000;
margin-bottom:60px;
}
.carousel .item{
height: 500px;
background-color:#000;
}
.carousel img{
width: 100%;
}
.carousel-caption p{
margin-bottom:20px;
font-size:20px;
line-height:1.8;
}
#tjm-container .col-md-4{
text-align:center;
}
hr.divider{
margin:40px 0;
}
.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>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bssssssssssssssss">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">現(xiàn)代瀏覽器博物館</a>
</div>
<div class="collapse navbar-collapse" id="bssssssssssssssss">
<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">
<li><a href="#tab-chrome" data-toggle="tab">Chrome</a></li>
<li><a href="#tab-firefox" data-toggle="tab">Firefox</a></li>
<li><a href="#tab-safari" data-toggle="tab">Safari</a></li>
<li><a href="#tab-opera" data-toggle="tab">Opera</a></li>
<li><a href="#tab-ie" data-toggle="tab">IE</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about">關(guān)于</a></li>
</ul>
</div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol>
<li data-target="#carousel-example-generic" data-slide-to="0"></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 role="listbox">
<div class="item active">
<img src="images/chrome-big.jpg">
<div>
<h1>Chrome</h1>
<p>谷歌瀏覽器谷歌瀏覽器谷歌瀏覽器谷歌瀏覽器谷歌瀏覽器谷歌瀏覽器</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">點(diǎn)我下載</a></p>
</div>
</div>
<div>
<img src="images/firefox-big.jpg">
<div>
<h1>Firefox</h1>
<p>火狐瀏覽器火狐瀏覽器火狐瀏覽器火狐瀏覽器火狐瀏覽器火狐瀏覽器</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">點(diǎn)我下載</a></p>
</div>
</div>
<div>
<img src="images/ie-big.jpg">
<div>
<h1>IE</h1>
<p>IE瀏覽器IE瀏覽器IE瀏覽器IE瀏覽器IE瀏覽器IE瀏覽器IE瀏覽器IE瀏覽器</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">點(diǎn)我下載</a></p>
</div>
</div><div>
<img src="images/opera-big.jpg">
<div>
<h1>Opera</h1>
<p>Opera瀏覽器Opera瀏覽器Opera瀏覽器Opera瀏覽器Opera瀏覽器Opera瀏覽器</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">點(diǎn)我下載</a></p>
</div>
</div><div>
<img src="images/safari-big.jpg">
<div>
<h1>Safari</h1>
<p>Safari瀏覽器Safari瀏覽器Safari瀏覽器Safari瀏覽器Safari瀏覽器Safari瀏覽器</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button" target="_blank">點(diǎn)我下載</a></p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span>上一頁(yè)</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span>下一頁(yè)</span>
</a>
</div>
<div id="tjm-container">
<div>
<div>
<img src="images/chrome-logo-small.jpg" alt="chrome">
<h2>Chrome</h2>
<p>谷歌瀏覽器</p>
<p><a class="btn btn-default" href="#" role="button">點(diǎn)我下載</a></p>
</div>
<div>
<img src="images/firefox-logo-small.jpg" alt="firefox">
<h2>Firefox</h2>
<p>火狐瀏覽器</p>
<p><a class="btn btn-default" href="#" role="button">點(diǎn)我下載</a></p>
</div>
<div>
<img src="images/safari-logo-small.jpg" alt="Safari">
<h2>Safari</h2>
<p>Safari瀏覽器</p>
<p><a class="btn btn-default" href="#" role="button">點(diǎn)我下載</a></p>
</div>
</div>
<div>
<hr>
?<!-- Nav tabs -->
?<ul class="nav nav-tabs" role="tablist" id="tab-list">
<li role="presentation"><a href="#tab-chrome" aria-controls="home" role="tab" data-toggle="tab">Chrome</a></li>
<li role="presentation"><a href="#tab-firefox" aria-controls="profile" role="tab" data-toggle="tab">Firefox</a></li>
<li role="presentation"><a href="#tab-safari" aria-controls="messages" role="tab" data-toggle="tab">Safari</a></li>
<li role="presentation"><a href="#tab-opera" aria-controls="settings" role="tab" data-toggle="tab">Opera</a></li>
<li role="presentation"><a href="#tab-ie" aria-controls="settings" role="tab" data-toggle="tab">IE</a></li>
?</ul>
?<!-- Tab panes -->
?<div>
<div role="tabpanel" class="tab-pane fade active in" id="tab-chrome">
<div class="row feature">
<div>
<h2>Chrome<span>使用最廣的瀏覽器</span></h2>
<p>谷歌瀏覽器谷歌瀏覽器谷歌瀏覽器</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/chrome-logo.jpg" alt="Chrome">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-firefox">
<div class="row feature">
<div>
<img class="feature-image img-responsive" src="images/firefox-logo.jpg" alt="Firefox">
</div>
<div>
<h2>Firefox<span>使用最廣的瀏覽器</span></h2>
<p>Firefox瀏覽器Firefox瀏覽器Firefox瀏覽器</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-safari">
<div class="row feature">
<div>
<h2>safari<span>使用最廣的瀏覽器</span></h2>
<p>safari瀏覽器safari瀏覽器safari瀏覽器</p>
</div>
<div>
<img class="feature-image img-responsive" src="images/safari-logo.jpg" alt="safari">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-opera">
<div class="row feature">
<div>
<img class="feature-image img-responsive" src="images/opera-logo.jpg" alt="opera">
</div>
<div>
<h2>opera<span>使用最廣的瀏覽器</span></h2>
<p>opera瀏覽器opera瀏覽器opera瀏覽器</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-ie">
<div class="row feature">
<div>
<h2>ie<span>使用最廣的瀏覽器</span></h2>
<p>ie瀏覽器ie瀏覽器ie瀏覽器</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>2017 tjm</p>
</footer>
</div>
</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>關(guān)于</h4>
? ? ? </div>
? ? ? <div>
? ? ? ? <p>關(guān)于慕課網(wǎng)的簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介簡(jiǎn)介</p>
? ? ? </div>
? ? ? <div>
? ? ? ? <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
? ? ? </div>
? ? </div><!-- /.modal-content -->
? </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
? ? <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
? ? <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
? ? ? ? ? ? ? $(document).ready(function () {
$("#bssssssssssssssss .dropdown-menu a").click(function () {
var href=$(this).attr("href");
$("#tab-list a[href='"+href+"']").tab("show");
});
? ? ? ? ? ? ? });
? ? ? ? ? ? ??
</script>
? </body>
</html>
2017-04-28
navbar-fixed-top ,這個(gè)不是有定位作嗎；親，建議你把展現(xiàn)的效果果發(fā)出來(lái)把。。你這樣寫得代讓我頭疼。。。