问答详情
源自：3-11 菜单定位及总结

标签页会切换，但没有定位，什么原因？

<!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>现代浏览器博物馆</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="#">现代浏览器博物馆</a>

</div>

<div class="collapse navbar-collapse" id="bssssssssssssssss">

<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">

<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">关于</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">点我下载</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">点我下载</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">点我下载</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">点我下载</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">点我下载</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>上一页</span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span>下一页</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">点我下载</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">点我下载</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">点我下载</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">&times;</span></button>

        <h4>关于</h4>

      </div>

      <div>

        <p>关于慕课网的简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</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-27 15:20

个回答

  • 狭路相逢_14324972
    2017-04-28 21:41:09

    navbar-fixed-top ,这个不是有定位作吗；亲，建议你把展现的效果果发出来把。。你这样写得代让我头疼。。。

    0