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

首页课程实战体系课手记专栏慕课教程

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

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

Sunshine丶冰

2016-03-02 20:58

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

</button>

</div>

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

Where

</a>

</ul>

</ul>

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

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

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

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

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

</div>

</div>

</div>

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

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

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

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

</div>

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

</div>

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

$(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回答

tracydragon

2016-07-18 22:03:53

云南人？

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


<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

基于bootstrap的网页开发

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

187668 学习 · 734 问题

查看课程

相似问题

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

回答 2

为什么点击”特点“不显示下拉菜单？下拉菜单的代码复制bootstrap的，初学者，求解答？

回答 1

为下拉菜单设置标题

回答 2

菜单定位时只能跳转到chrome第一个页面，其他的不能是什么情况？

回答 4

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

回答 2

打开慕课网App查看更多内容