亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

老師為什么我用的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" >
</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米。北連迪慶藏族自治州，南接大理白族自治州，西鄰怒江傈僳族自治州，東與四川涼山彝族自治州和攀枝花市接壤?？偯娣e20600平方公里。
??????? 轄古城區、玉龍納西族自治縣、永勝縣、華坪縣、寧蒗彝族自治縣，共有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下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號