关于菜单定位只能定位第一个标签页，其他标签页无法定位的问题-慕课网

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

来源：3-11 菜单定位及总结

Rainy_man

2017-07-27 18:57

   <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>切换导航</span>
        <span></span>
        <span></span>
        <span></span>        
      </button>
      <a href="#">现代浏览器博物馆</a>
    </div>
    <div class="collapse navbar-collapse" id="demo-navbar">
          <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" 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">关于</a></li>
          </ul>
    </div>
  </div>
</nav><!--导航条结束-->


<!-- 标签页开始 -->
  <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浏览器，是一个由Google（谷歌）公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</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，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，
                        使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
                </div>
            </div>
    </div>

    <div  id="tab-safari">
            <div class="row feature">
                <div>
                    <h2>Safari <span>Mac用户首选</span></h2>
                    <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
                        Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是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公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</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版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为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>
<!-- 标签页结束 -->
<!-- 弹出框开始 -->
<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>关于我们，请拨打我们的客服热线：110</p>
      </div>
      <div>
        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<!-- 弹出框结束 -->
    <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>

写回答关注