                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Bootstrap
                        
                        /基于bootstrap的網(wǎng)頁(yè)開(kāi)發(fā)

老師為什么我用的HBuilder按照你上面的代碼不能實(shí)現(xiàn)下拉菜單于標(biāo)簽頁(yè)對(duì)應(yīng)的跳轉(zhuǎn)！

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

? ? ? </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="#">特點(diǎn)</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>

?

? <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>是一種土狀堆積物塑造的、成群的柱狀地形，因遠(yuǎn)望如林而得名。

? ? 土林一般出現(xiàn)在盆地或谷地內(nèi)，以近年在中國(guó)云南元謀發(fā)現(xiàn)的為最典型，

? ? 反映了古地理變遷和地貌發(fā)育過(guò)程。元謀土林是中國(guó)乃至世界上一大奇妙的自然奇觀。在經(jīng)歷了幾百萬(wàn)年的地殼運(yùn)動(dòng)后，風(fēng)雨之神把元謀的土地雕琢成了千奇百怪的形狀。

? ? 走進(jìn)土林就如同進(jìn)入了神秘的魔幻世界，眼前鬼斧神工般的景觀令人目不暇接。充滿神奇魅力的元謀土林還吸引了眾多的攝影家、地質(zhì)學(xué)家、知名導(dǎo)演前來(lái)參觀取景，

? ? 元謀也成為了影視、攝影的天堂。在這里拍攝的電影有《無(wú)極》、《千里走單騎》等。</p>

? ? </div>

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

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

? ? </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>麗江市，云南省轄地級(jí)市，位于云南省西北部云貴高原與青藏高原的連接部位，

? ? 市區(qū)中心位于東經(jīng)100°25'北緯26°86'，海拔高度為2418米。北連迪慶藏族自治州，南接大理白族自治州，西鄰怒江傈僳族自治州，東與四川涼山彝族自治州和攀枝花市接壤?？偯娣e20600平方公里。

? ? 轄古城區(qū)、玉龍納西族自治縣、永勝縣、華坪縣、寧蒗彝族自治縣，共有69個(gè)鄉(xiāng)（鎮(zhèn)）、446個(gè)村民委員會(huì)，總?cè)丝?244769人（第六次人口普查）。麗江古城區(qū)是中國(guó)罕見(jiàn)的保存相當(dāng)完好的少數(shù)民族古城，

? ? 集中了納西文化的精華，完整地保留了宋、元以來(lái)形成的歷史風(fēng)貌。</p>

? ? </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米，東鄰楚雄州，南靠普洱市、臨滄市，西與保山市、

? ? 怒江州相連，北接麗江市。地跨東經(jīng)98°52′～101°03′，北緯24°41′～26°42′之間，東巡洱海，西及點(diǎn)蒼山脈，轄大理市和祥云、彌渡、賓川、永平、云龍、洱源、鶴慶、劍川8個(gè)縣以及漾濞、巍山、

? ? 南澗3個(gè)少數(shù)民族自治縣，是中國(guó)西南邊疆開(kāi)發(fā)較早的地區(qū)之一。地處低緯高原，四季溫差不大，干濕季分明，以低緯高原季風(fēng)氣候?yàn)橹?，境?nèi)以蝴蝶泉、蒼山、洱海、大理古城、崇圣寺三塔等景點(diǎn)最有代表性。</p>

? ? </div>

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

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

? ? </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">是唯一的熱帶雨林自然保護(hù)區(qū)</span></h2>西雙版納傣族自治州，位于中華人民共和國(guó)云南省最南端，是云南省下轄的一個(gè)少數(shù)民族自治州。

? ? 地處北緯約21°10’，東經(jīng)99°55’至101°50’之間，屬北回歸線以南的熱帶濕潤(rùn)區(qū)。東西面與江城縣、普洱市相連；西北面與瀾滄縣為鄰；東南部、南部和西南部分別與老撾、緬甸山水相連，鄰近泰國(guó)和越南，

? ? 與泰國(guó)的直線距離僅200余公里。東距太平洋的北部灣400多公里，西距印度洋的孟加拉灣600余公里。邊界線長(zhǎng)達(dá)966.3公里，約等于云南省邊境線總長(zhǎng)的1/4。

? ? 西雙版納有中國(guó)唯一的熱帶雨林自然保護(hù)區(qū)，氣候溫暖濕潤(rùn)，樹(shù)木蔥蘢，蔓藤盤根錯(cuò)節(jié)，不少珍禽異獸，如亞洲象，犀鳥(niǎo)，孔雀，黑冠長(zhǎng)臂猿都生活在這片熱帶叢林里。而西雙版納特有和稀有的植物中有望天樹(shù)、

? ? 紅光樹(shù)、云南肉豆蔻、四藪木、黃果木、胡桐、美登木、三尖杉等等。</p>

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

源自：基于bootstrap的網(wǎng)頁(yè)開(kāi)發(fā) 3-11

關(guān)注問(wèn)題我要回答

5161

操作

收起

2 回答

tracydragon
2016-07-18

云南人？

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Acat
2016-03-02

哥們，你寫代碼太粗心了，我整理了下出現(xiàn)問(wèn)題的原因：

1、#tab-go .dropdown-menu a的href要與#tab-list a的href一致。即代碼中的href="#麗江"與href="#tab-麗江"要一致。（這個(gè)就是你問(wèn)的為什么不能實(shí)現(xiàn)下拉菜單于標(biāo)簽頁(yè)對(duì)應(yīng)的跳轉(zhuǎn)）

2、要定義父容器帶"navbar"類的導(dǎo)航條，里面包裹導(dǎo)航條的內(nèi)容，導(dǎo)航標(biāo)題要用"navbar-header"類包裹。

3、標(biāo)簽頁(yè)要寫在"navbar"類導(dǎo)航條的外面，不能包裹在導(dǎo)航條里面。

4、頁(yè)面上標(biāo)簽要對(duì)應(yīng)閉合，貼出來(lái)的代碼很多地方?jīng)]有閉合，導(dǎo)致頁(yè)面錯(cuò)亂。

5、代碼書寫的時(shí)候要對(duì)齊，格式化，方便自己與他人閱讀，利人利己。

6、href="#tab-麗江"超鏈接中盡量不要使用中文，避免一些坑爹事情發(fā)生。

下面是整理后的正確代碼：

<!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>  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="#">特點(diǎn)</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>
??????? 是一種土狀堆積物塑造的、成群的柱狀地形，因遠(yuǎn)望如林而得名。
??????? 土林一般出現(xiàn)在盆地或谷地內(nèi)，以近年在中國(guó)云南元謀發(fā)現(xiàn)的為最典型，
??????? 反映了古地理變遷和地貌發(fā)育過(guò)程。元謀土林是中國(guó)乃至世界上一大奇妙的自然奇觀。在經(jīng)歷了幾百萬(wàn)年的地殼運(yùn)動(dòng)后，風(fēng)雨之神把元謀的土地雕琢成了千奇百怪的形狀。
??????? 走進(jìn)土林就如同進(jìn)入了神秘的魔幻世界，眼前鬼斧神工般的景觀令人目不暇接。充滿神奇魅力的元謀土林還吸引了眾多的攝影家、地質(zhì)學(xué)家、知名導(dǎo)演前來(lái)參觀取景，
??????? 元謀也成為了影視、攝影的天堂。在這里拍攝的電影有《無(wú)極》、《千里走單騎》等。
????? </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>
??????? 麗江市，云南省轄地級(jí)市，位于云南省西北部云貴高原與青藏高原的連接部位，
??????? 市區(qū)中心位于東經(jīng)100°25'北緯26°86'，海拔高度為2418米。北連迪慶藏族自治州，南接大理白族自治州，西鄰怒江傈僳族自治州，東與四川涼山彝族自治州和攀枝花市接壤?？偯娣e20600平方公里。
??????? 轄古城區(qū)、玉龍納西族自治縣、永勝縣、華坪縣、寧蒗彝族自治縣，共有69個(gè)鄉(xiāng)（鎮(zhèn)）、446個(gè)村民委員會(huì)，總?cè)丝?244769人（第六次人口普查）。麗江古城區(qū)是中國(guó)罕見(jiàn)的保存相當(dāng)完好的少數(shù)民族古城，
??????? 集中了納西文化的精華，完整地保留了宋、元以來(lái)形成的歷史風(fēng)貌。
????? </p>
??? </div>
? </div>
? <div class="tab-pane col-md-12" id="tab-da">
??? <div>
????? <p>
??????? <h2>云南大理<span>大理古城、雙廊洱海</span></h2>
??????? 大理白族自治州地處云南省中部偏西，海拔2090米，東鄰楚雄州，南靠普洱市、臨滄市，西與保山市、
??????? 怒江州相連，北接麗江市。地跨東經(jīng)98°52′～101°03′，北緯24°41′～26°42′之間，東巡洱海，西及點(diǎn)蒼山脈，轄大理市和祥云、彌渡、賓川、永平、云龍、洱源、鶴慶、劍川8個(gè)縣以及漾濞、巍山、
??????? 南澗3個(gè)少數(shù)民族自治縣，是中國(guó)西南邊疆開(kāi)發(fā)較早的地區(qū)之一。地處低緯高原，四季溫差不大，干濕季分明，以低緯高原季風(fēng)氣候?yàn)橹?，境?nèi)以蝴蝶泉、蒼山、洱海、大理古城、崇圣寺三塔等景點(diǎn)最有代表性。
????? </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>是唯一的熱帶雨林自然保護(hù)區(qū)</span></h2>
????? 西雙版納傣族自治州，位于中華人民共和國(guó)云南省最南端，是云南省下轄的一個(gè)少數(shù)民族自治州。
????? 地處北緯約21°10’，東經(jīng)99°55’至101°50’之間，屬北回歸線以南的熱帶濕潤(rùn)區(qū)。東西面與江城縣、普洱市相連；西北面與瀾滄縣為鄰；東南部、南部和西南部分別與老撾、緬甸山水相連，鄰近泰國(guó)和越南，
????? 與泰國(guó)的直線距離僅200余公里。東距太平洋的北部灣400多公里，西距印度洋的孟加拉灣600余公里。邊界線長(zhǎng)達(dá)966.3公里，約等于云南省邊境線總長(zhǎng)的1/4。
????? 西雙版納有中國(guó)唯一的熱帶雨林自然保護(hù)區(qū)，氣候溫暖濕潤(rùn)，樹(shù)木蔥蘢，蔓藤盤根錯(cuò)節(jié)，不少珍禽異獸，如亞洲象，犀鳥(niǎo)，孔雀，黑冠長(zhǎng)臂猿都生活在這片熱帶叢林里。而西雙版納特有和稀有的植物中有望天樹(shù)、
????? 紅光樹(shù)、云南肉豆蔻、四藪木、黃果木、胡桐、美登木、三尖杉等等。
???? </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>