<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> 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>
云南人?
哥们,你写代码太粗心了,我整理了下出现问题的原因:
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>
<!-- 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>