为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/Bootstrap

/基于bootstrap的网页开发

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

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

源自：基于bootstrap的网页开发  3-11

关注问题 我要回答
845
操作
收起

正在回答

1 回答

狭路相逢_14324972
2017-04-28

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

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
基于bootstrap的网页开发
  • 参与学习       187690    人
  • 解答问题       734    个

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

进入课程

本课相似问答

5 回答关于菜单定位只能定位第一个标签页，其他标签页无法定位的问题

2 回答点击chrome 能跳转到标签页那里，其他不跳转是什么原因？

2 回答虽然能跳转到相应的标签页 但是tab标签那里还是不会跳

1 回答如何换轮播标签

1 回答标签页的图片
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信