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

老师为什么我用的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>


正在回答

2 回答

云南人?


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

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

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>

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

举报

0/150
提交
取消

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

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