2014-02-14 65 views
0

我需要使用nav-pills在bootstrap中創建菜單。我在菜單中有5個部分,每個部分都有文本(如第一個是「aaaa」,第二個是「bbbb」等)。如果我點擊第一部分顯示文本「aaaa」,點擊第二部分顯示文本「bbbb」,但如果我點擊第三/第四/第五部分沒有任何反應。HTML,CSS Bootstrap

任何想法如何解決這個問題?提前致謝。

<!DOCTYPE html> 
<html lang="en"> 
<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>APK Market</title> 
<link rel="stylesheet" type="text/css" href="style/style.css"> 
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<script src="bootstrap/js/bootstrap.js"></script> 
</head> 
<body> 
<div class="header"> 
<div class="logo"></div> 
<div class="navbar"> 
    <ul class="nav nav-pills"> 
     <li class="active"><a data-toggle="tab" href="#games">Games</a></li> 
     <li><a data-toggle="tab" href="#apps">Apps</a></li> 
     <li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li> 
     <li><a data-toogle="tab" href="#themes">Themes</a></li> 
     <li><a data-toogle="tab" href="#archive">Archive</a></li> 
    </ul> 
</div> 
</div> 
<div class="tab-content"> 
<div id="games" class="tab-pane active">aaaaaaaaaaaa</div> 
<div id="apps" class="tab-pane">bbbbbbbbbbbbb</div> 
<div id="live_wallpapers" class="tab-pane">ccccccccccc</div> 
<div id="themes" class="tab-pane">ddddddddddd</div> 
<div id="archive" class="tab-pane">eeeeeeeeee</div> 
</div> 
</div> 
<div class="content"></div> 
<div class="sidebar"></div> 
<div class="footer"></div> 
<script src="https://code.jquery.com/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.js"></script> 
</body> 
</html> 
+0

移動你的代碼的jsfiddle更好的表現。這也會讓其他人有能力編輯你的代碼並嘗試一些解決方案,並更好地理解你的問題。 – alexp

+0

JIC,http://stackoverflow.com/questions/17251586/using-twitters-bootstrap-in-jsfiddle – alexp

+0

@alexp JS小提琴中的代碼是很好的編輯和測試,但SO的目的是提供完整問題的完整答案這意味着答案或問題中的代碼的外部來源將會降低未來具有相同問題的讀者的問題的價值。 –

回答

3

你拼寫錯誤。

<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li> 
<li><a data-toogle="tab" href="#themes">Themes</a></li> 
<li><a data-toogle="tab" href="#archive">Archive</a></li> 

變化數據的toogle數據撥動..