Question

我正在使用phonegap和bootstrap编写移动应用程序，使用主导航栏在我的视图或标签之间切换，但是可切换列表（例如here）似乎不起作用。有谁知道如何解决这一问题？

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

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

Answer 2

简单的方法，你可以这样做，不需要添加更多的javascript行，只需加载bootstrap.css ver 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>

Answer 3

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

Bootstrap 3 Togglable标签不起作用

3 个答案: