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

老师为什么我用的HBuilder按照你上面的代码不能实现下拉菜单于标签页对应的跳转!

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#tab-go">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#" ><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>&nbsp;&nbsp;H. Peng</a>

    </div>

    <div class="collapse navbar-collapse" id="tab-go">

      <ul class="nav navbar-nav">

      <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>

      <li><a href="#">特点</a></li>

      <li class="dropdown">

 <a href="#" class="dropdown-toggle" data-toggle="dropdown">

   Where

   <span class="caret"></span>

 </a>

 <ul class="dropdown-menu" role="menu">

   <li><a href="#元谋">元谋</a></li>

   <li><a href="#丽江">丽江</a></li>

   <li><a href="#大理">大理</a></li>

   <li><a href="#西双版纳">西双版纳</a></li>

  </ul>

 <ul class="nav nav-tabs" role="tablist" id="tab-list">

    <li class="active"><a href="#tab-元谋" role="tab" data-toggle="tab">元谋</a></li>

    <li><a href="#tab-丽江"  role="tab" data-toggle="tab">丽江</a></li>

    <li><a href="#tab-大理"  role="tab" data-toggle="tab">大理</a></li>

    <li><a href="#tab-西双版纳"  role="tab" data-toggle="tab">西双版纳</a></li>

  </ul>


  <!-- Tab panes -->

  <div class="tab-content">

    <div class="tab-pane  active col-md-12" id="tab-元谋">

    <div class="col-md-7">

    <p><h2 class="feature-heading">元谋土林<span class="text-muted">元谋土林是很神奇的</span></h2>是一种土状堆积物塑造的、成群的柱状地形,因远望如林而得名。

    土林一般出现在盆地或谷地内,以近年在中国云南元谋发现的为最典型,

    反映了古地理变迁和地貌发育过程。元谋土林是中国乃至世界上一大奇妙的自然奇观。在经历了几百万年的地壳运动后,风雨之神把元谋的土地雕琢成了千奇百怪的形状。

    走进土林就如同进入了神秘的魔幻世界,眼前鬼斧神工般的景观令人目不暇接。充满神奇魅力的元谋土林还吸引了众多的摄影家、地质学家、知名导演前来参观取景,

    元谋也成为了影视、摄影的天堂。在这里拍摄的电影有《无极》、《千里走单骑》等。</p>

    </div>

    <div class="col-md-5">

    <img class="feature-image img-responsive"src="img/IMG_03.jpg">

    </div>

    </div>

    <div class="tab-pane col-md-12" id="tab-丽江">

    <div class="col-md-5">

    <img class="feature-image img-responsive" src="img/IMG_05.jpg">

    </div>

    <div class="col-md-7">

    <p><h2 class="feature-heading">云南丽江<span class="text-muted">丽江古城</span></h2>丽江市,云南省辖地级市,位于云南省西北部云贵高原与青藏高原的连接部位,

    市区中心位于东经100°25'北纬26°86',海拔高度为2418米。北连迪庆藏族自治州,南接大理白族自治州,西邻怒江傈僳族自治州,东与四川凉山彝族自治州和攀枝花市接壤。总面积20600平方公里。

    辖古城区、玉龙纳西族自治县、永胜县、华坪县、宁蒗彝族自治县,共有69个乡(镇)、446个村民委员会,总人口1244769人(第六次人口普查)。丽江古城区是中国罕见的保存相当完好的少数民族古城,

    集中了纳西文化的精华,完整地保留了宋、元以来形成的历史风貌。</p>

    </div>

    </div>

    <div class="tab-pane col-md-12" id="tab-大理">

    <div class="col-md-7">

    <p><h2 class="feature-heading">云南大理<span class="text-muted">大理古城、双廊洱海</span></h2>大理白族自治州地处云南省中部偏西,海拔2090米,东邻楚雄州,南靠普洱市、临沧市,西与保山市、

    怒江州相连,北接丽江市。地跨东经98°52′~101°03′,北纬24°41′~26°42′之间,东巡洱海,西及点苍山脉,辖大理市和祥云、弥渡、宾川、永平、云龙、洱源、鹤庆、剑川8个县以及漾濞、巍山、

    南涧3个少数民族自治县,是中国西南边疆开发较早的地区之一。地处低纬高原,四季温差不大,干湿季分明,以低纬高原季风气候为主,境内以蝴蝶泉、苍山、洱海、大理古城、崇圣寺三塔等景点最有代表性。</p>

    </div>

    <div class="col-md-5">

    <img class="feature-image img-responsive" src="img/IMG_06.jpg">

    </div>

    </div>

    <div class="tab-pane  col-md-12" id="tab-西双版纳">

    <div class="col-md-5">

    <img class="feature-image img-responsive" src="img/IMG_07.jpg">

    </div>

    <div class="col-md-7">

    <p><h2 class="feature-heading">西双版纳<span class="text-muted">是唯一的热带雨林自然保护区</span></h2>西双版纳傣族自治州,位于中华人民共和国云南省最南端,是云南省下辖的一个少数民族自治州。

    地处北纬约21°10’,东经99°55’至101°50’之间,属北回归线以南的热带湿润区。东西面与江城县、普洱市相连;西北面与澜沧县为邻;东南部、南部和西南部分别与老挝、缅甸山水相连,邻近泰国和越南,

    与泰国的直线距离仅200余公里。东距太平洋的北部湾400多公里,西距印度洋的孟加拉湾600余公里。边界线长达966.3公里,约等于云南省边境线总长的1/4。

    西双版纳有中国唯一的热带雨林自然保护区,气候温暖湿润,树木葱茏,蔓藤盘根错节,不少珍禽异兽,如亚洲象,犀鸟,孔雀,黑冠长臂猿都生活在这片热带丛林里。而西双版纳特有和稀有的植物中有望天树、

    红光树、云南肉豆蔻、四薮木、黄果木、胡桐、美登木、三尖杉等等。</p>

    </div>

    </div>

  </div>

 <script>


$(document).ready(function(){


    $("#tab-go .dropdown-menu a").click(function(e){


    var href = $(this).attr("href");


    $("#tab-list a[href='" + href + "']").tab("show");


    e.preventDefault();


})

        </script>


提问者:Sunshine丶冰 2016-03-02 20:58

个回答

  • tracydragon
    2016-07-18 22:03:53

    云南人?


  • Acat
    2016-03-02 23:05:54

    哥们,你写代码太粗心了,我整理了下出现问题的原因:

    1、#tab-go .dropdown-menu a的href要与#tab-list a的href一致。即代码中的href="#丽江"href="#tab-丽江"要一致。(这个就是你问的为什么不能实现下拉菜单于标签页对应的跳转)

    2、要定义父容器带"navbar"类的导航条,里面包裹导航条的内容,导航标题要用"navbar-header"类包裹。

    3、标签页要写在"navbar"类导航条的外面,不能包裹在导航条里面。

    4、页面上标签要对应闭合,贴出来的代码很多地方没有闭合,导致页面错乱。

    5、代码书写的时候要对齐,格式化,方便自己与他人阅读,利人利己。

    6、href="#tab-丽江"超链接中尽量不要使用中文,避免一些坑爹事情发生。


    下面是整理后的正确代码:

    <!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>Hello World</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    </head>

    <body>
    <!--导航条开始-->
      <div class="navbar navbar-default">
        <div>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#tab-go">
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
          <a href="#" ><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>&nbsp;&nbsp;H. Peng</a>
        </div>
        <div class="collapse navbar-collapse" id="tab-go">
          <ul class="nav navbar-nav">
            <li><a href="#">Home<span>(current)</span></a></li>
            <li><a href="#">特点</a></li>
            <li>
               <a href="#" data-toggle="dropdown"> Where  <span></span>  </a>
               <ul role="menu">
                 <li><a href="#tab-yuan">元谋</a></li>
                 <li><a href="#tab-li">丽江</a></li>
                 <li><a href="#tab-da">大理</a></li>
                 <li><a href="#tab-xi">西双版纳</a></li>
               </ul>
            </li>
          </ul>
        </div>
    </div>
    <!--导航条结束-->

    <!--标签页开始-->
    <ul class="nav nav-tabs" role="tablist" id="tab-list">
      <li><a href="#tab-yuan" role="tab" data-toggle="tab">元谋</a></li>
      <li><a href="#tab-li"  role="tab" data-toggle="tab">丽江</a></li>
      <li><a href="#tab-da"  role="tab" data-toggle="tab">大理</a></li>
      <li><a href="#tab-xi"  role="tab" data-toggle="tab">西双版纳</a></li>
    </ul>


    <!-- Tab panes -->
    <div>
      <div class="tab-pane  active col-md-12" id="tab-yuan">
        <div>
          <p>
            <h2>元谋土林<span>元谋土林是很神奇的</span></h2>
            是一种土状堆积物塑造的、成群的柱状地形,因远望如林而得名。
            土林一般出现在盆地或谷地内,以近年在中国云南元谋发现的为最典型,
            反映了古地理变迁和地貌发育过程。元谋土林是中国乃至世界上一大奇妙的自然奇观。在经历了几百万年的地壳运动后,风雨之神把元谋的土地雕琢成了千奇百怪的形状。
            走进土林就如同进入了神秘的魔幻世界,眼前鬼斧神工般的景观令人目不暇接。充满神奇魅力的元谋土林还吸引了众多的摄影家、地质学家、知名导演前来参观取景,
            元谋也成为了影视、摄影的天堂。在这里拍摄的电影有《无极》、《千里走单骑》等。
          </p>
        </div>
        <div>
          <img class="feature-image img-responsive"src="img/IMG_03.jpg">
        </div>
      </div>
      <div class="tab-pane col-md-12" id="tab-li">
        <div>
          <img class="feature-image img-responsive" src="img/IMG_05.jpg">
        </div>
        <div>
          <p>
            <h2>云南丽江<span>丽江古城</span></h2>
            丽江市,云南省辖地级市,位于云南省西北部云贵高原与青藏高原的连接部位,
            市区中心位于东经100°25'北纬26°86',海拔高度为2418米。北连迪庆藏族自治州,南接大理白族自治州,西邻怒江傈僳族自治州,东与四川凉山彝族自治州和攀枝花市接壤。总面积20600平方公里。
            辖古城区、玉龙纳西族自治县、永胜县、华坪县、宁蒗彝族自治县,共有69个乡(镇)、446个村民委员会,总人口1244769人(第六次人口普查)。丽江古城区是中国罕见的保存相当完好的少数民族古城,
            集中了纳西文化的精华,完整地保留了宋、元以来形成的历史风貌。
          </p>
        </div>
      </div>
      <div class="tab-pane col-md-12" id="tab-da">
        <div>
          <p>
            <h2>云南大理<span>大理古城、双廊洱海</span></h2>
            大理白族自治州地处云南省中部偏西,海拔2090米,东邻楚雄州,南靠普洱市、临沧市,西与保山市、
            怒江州相连,北接丽江市。地跨东经98°52′~101°03′,北纬24°41′~26°42′之间,东巡洱海,西及点苍山脉,辖大理市和祥云、弥渡、宾川、永平、云龙、洱源、鹤庆、剑川8个县以及漾濞、巍山、
            南涧3个少数民族自治县,是中国西南边疆开发较早的地区之一。地处低纬高原,四季温差不大,干湿季分明,以低纬高原季风气候为主,境内以蝴蝶泉、苍山、洱海、大理古城、崇圣寺三塔等景点最有代表性。
          </p>
        </div>
        <div>
          <img class="feature-image img-responsive" src="img/IMG_06.jpg">
        </div>
      </div>
      <div class="tab-pane  col-md-12" id="tab-xi">
        <div>
         <img class="feature-image img-responsive" src="img/IMG_07.jpg">
        </div>
        <div>
         <p>
          <h2>西双版纳<span>是唯一的热带雨林自然保护区</span></h2>
          西双版纳傣族自治州,位于中华人民共和国云南省最南端,是云南省下辖的一个少数民族自治州。
          地处北纬约21°10’,东经99°55’至101°50’之间,属北回归线以南的热带湿润区。东西面与江城县、普洱市相连;西北面与澜沧县为邻;东南部、南部和西南部分别与老挝、缅甸山水相连,邻近泰国和越南,
          与泰国的直线距离仅200余公里。东距太平洋的北部湾400多公里,西距印度洋的孟加拉湾600余公里。边界线长达966.3公里,约等于云南省边境线总长的1/4。
          西双版纳有中国唯一的热带雨林自然保护区,气候温暖湿润,树木葱茏,蔓藤盘根错节,不少珍禽异兽,如亚洲象,犀鸟,孔雀,黑冠长臂猿都生活在这片热带丛林里。而西双版纳特有和稀有的植物中有望天树、
          红光树、云南肉豆蔻、四薮木、黄果木、胡桐、美登木、三尖杉等等。
         </p>
        </div>
      </div>
    </div>
    <!--标签页结束-->
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#tab-go .dropdown-menu a").click(function(e){
          var href = $(this).attr("href");
          $("#tab-list a[href='" + href + "']").tab("show");
          e.preventDefault();
        })
      });

    </script>
    </body>
    </html>