点击第一个Chrome可以跳转,后面的不行,怎么回事

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

apianmuse

2018-01-17 15:45

而且第一个跳转直接是跳转到了图片位置,而不是标签

下面是部分代码
<div class="collapse navbar-collapse" id="demo-navbar">
   <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">
               <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="#about">关于</a></li>
   </ul>
</div>

-----------------------

<!--标签-->
<ul class="nav nav-tabs" role="tablist" id="tab-list">
   <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 class="feature-image img-responsive" src="images/chrome-logo.jpg"
                    alt="Chrome">
           </div>
       </div>
   </div>
   <div class="tab-pane" id="tab-firefox">
       <div class="row feature">
           <div class="col-md-5">
               <img class="feature-image img-responsive" src="images/firefox-logo.jpg"
                    alt="Firefox">
           </div>
           <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>
   </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 class="feature-image img-responsive" src="images/safari-logo.jpg"
                    alt="Safari">
           </div>
       </div>
   </div>
   <div class="tab-pane" id="tab-opera">
       <div class="row feature">
           <div class="col-md-5">
               <img class="feature-image img-responsive" src="images/opera-logo.jpg"
                    alt="Opera">
           </div>
           <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>
   </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 class="feature-image img-responsive" src="images/ie-logo.jpg"
                    alt="IE">
           </div>
       </div>
   </div>
</div>
------------------

<script>
   $(document).ready(function(){  //页面加载完毕后执行
        $("#demo-navbar .dropdown-menu a").click(function () {
            var href=$(this).attr("href");

            $("#tab-list a[href = '#"+href+" ']").tab('show');
        });
   });
</script>

写回答 关注

1回答

  • 慕标105419
    2018-01-20 14:08:12

    需要添加jquery.js和bootstrap.js库

    apianm...

    谢谢。已经解决了,我把自己写的js放到链接的库下面就可以了

    2018-01-21 15:21:54

    共 1 条回复 >

基于bootstrap的网页开发

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

187669 学习 · 734 问题

查看课程

相似问题