CODEWITHSUNDEEP
jquerytwitter-bootstrapcordova
user1952312
user1952312

Reputation: 258

Bootstrap 3 Togglable Tabs not working

I'm writing a mobile app using phonegap and bootstrap using the main navbar to switch between my view or tab however the togglable list (example here) doesn't seem to work. Does anyone know how to fix this? 

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

Upvotes: 0

Views: 10802

Answers (3)

Yocto Karthi
Yocto Karthi

Reputation: 21

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

Upvotes: -1

yussan
yussan

Reputation: 2327

Simple way, you can do this, wothouth adding more javascript line, just only load 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>

Upvotes: 1

Nikhil N
Nikhil N

Reputation: 4577

There were typo mistakes in your html with ID assignment in tab-content. You have specified 

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

But it should be like

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

Demo Fiddle

Following is corrected 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>

Upvotes: 1

Related Questions