2013-10-20 173 views
0

我正在使用phonegap和bootstrap使用主導航欄在我的視圖或選項卡之間切換,但是可切換列表(示例here)似乎無法正常工作,正在編寫移動應用程序。有誰知道如何解決這一問題?Bootstrap 3 Togglable Tabs not working

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 
    <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Cancer Resource Application</title> 
     <meta name="description" content="http://www.cancerresource-al.org"> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
     <link rel="stylesheet" href="css/main.css"> 
    </head> 

    <body> 

    <div class="navbar navbar-inverse navbar-fixed-bottom navbar-cenerted" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">Cancer Resource Application</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav nav-tabs " id='tabs'> 

       <li><a class="text-muted" href="#search" data-toggle="tab"><span class="glyphicon glyphicon-search"></span>Search</a></li> 

       <li><a class="text-muted" href="#resource" data-toggle="tab"><span class="glyphicon glyphicon-th"></span> 
       Resources</a></li> 

       <li><a class="text-muted" href="#list"><span class="glyphicon glyphicon-list" data-toggle="tab"></span>List</a></li> 

       <li><a class="text-muted" href="#favorites" data-toggle="tab"><span class="glyphicon glyphicon-star"></span>Favorites</a></li> 

      </ul> 
     </div> 
    </div> 
    <div class='tab-content'> 
     <div class='tab-pane fade in active' id='search'> 
      <ul><li>...search</li></ul> 
     </div> 
     <div class='tab-pane fade' id='resoucre'> 
      <ul><li>...resource</li></ul> 
     </div> 
     <div class='tab-pane fade' id='list'> 
      <ul><li>...list</li></ul> 
     </div> 
     <div class='tab-pane fade' id='favorite'> 
      <ul><li>...favorites</li></ul> 
     </div> 
    </div> 
    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="js/vendor/bootstrap.min.js"></script> 
    <script type="text/javascript" src="phonegap.js"></script> 
     <script src="js/main.js"></script> 
     <script type="text/javascript"> 
      $('#tabs a').click(function (e) { 
      e.preventDefault(); 
      $(this).tab('show');}) 
     </script> 
    </body> 
</html> 

回答

1

您的html中存在輸入錯誤,並且在標籤內容中分配了ID。您指定

<div class='tab-pane fade' id='resoucre'> and <div class='tab-pane fade' id='favorite'> 

但它應該像

<div class='tab-pane fade' id='resource'> and <div class='tab-pane fade' id='favorites'> 

Demo Fiddle

以下是修正HTML ..

<div class="navbar navbar-inverse navbar-fixed-bottom navbar-cenerted" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

     </button> <a class="navbar-brand" href="index.html">Cancer Resource Application</a> 

    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav nav-tabs " id='tabs'> 
      <li><a class="text-muted" href="#search" data-toggle="tab"><span class="glyphicon glyphicon-search"></span>Search</a> 

      </li> 
      <li><a class="text-muted" href="#resource" data-toggle="tab"><span class="glyphicon glyphicon-th"></span> 
       Resources</a> 

      </li> 
      <li><a class="text-muted" href="#list"><span class="glyphicon glyphicon-list" data-toggle="tab"></span>List</a> 

      </li> 
      <li><a class="text-muted" href="#favorites" data-toggle="tab"><span class="glyphicon glyphicon-star"></span>Favorites</a> 

      </li> 
     </ul> 
    </div> 
</div> 
<div class='tab-content'> 
    <div class='tab-pane fade in active' id='search'> 
     <ul> 
      <li>...search</li> 
     </ul> 
    </div> 
    <div class='tab-pane fade' id='resource'> 
     <ul> 
      <li>...resource</li> 
     </ul> 
    </div> 
    <div class='tab-pane fade' id='list'> 
     <ul> 
      <li>...list</li> 
     </ul> 
    </div> 
    <div class='tab-pane fade' id='favorites'> 
     <ul> 
      <li>...favorites</li> 
     </ul> 
    </div> 
</div> 
+0

我有複製並粘貼此修復程序直接進入我的項目逐字但它仍然當您單擊每個選項卡窗格我不相信我的JS工作 – user1952312

+0

你能看到任何不切換標籤內容控制檯中的JS錯誤? – nik

+0

我想明白了,我有[這個]() 這不工作但是當我更改爲[this]()上述答案有效時 – user1952312

1

簡單的辦法,你可以做到這一點,wothouth加入更多javascript線,只需加載bootstrap.css版本3

<div class="tabbable" > <!-- Only required for left/right tabs --> 
       <ul class="nav nav-tabs" id="myTab"> 
        <li class="active"><a href="#baru" data-toggle="tab">Baru</a></li> 
        <li ><a href="#posted" data-toggle="tab">Posted</a></li> 
        <li><a href="#draft" data-toggle="tab">Draft</a></li> 
       </ul> 
       <br/> 
       <div class="tab-content"> 

        <!--new--> 
        <div class="tab-pane active" id="baru"> 
         baru 
        </div> 

        <!--new--> 
        <div class="tab-pane" id="posted"> 
         posted 
        </div> 

        <!--new--> 
        <div class="tab-pane" id="draft"> 
         draft 
        </div> 
       </div> 
      </div> 
-1
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
<script src="js/jquery.js"></script> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au 

+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" 

crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 

0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

</body> 
</html> 
+1

請解釋您的更改以及您爲解決問題所做的事情。否則,您的答案可能會被降低或甚至被刪除。 – Hexaholic

+0

初始化javascript&Css的順序是 1. jquery.js 2. boostrap.min.css 3. boostrap.min.js chech您的訂單.. –