CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
mkafiyan
mkafiyan

Reputation: 954

Twitter Bootstrap tabs not working well

I'm trying to use bootstrap tab in my code but it does not seem to work.The tabs get displayed, but when I click on them nothing happens and all content show.I wrote my code as same as bootstrap document and I cant figured out where the problem is? I already read Twitter Bootstrap tabs not working for me issue but it doesn't help me. 

 <!DOCTYPE HTML>
 <html dir="rtl" lang="">
 <title>انتشارات رویای پارسیان</title>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, height=device-height"/>
  <script type="text/javascript" src="js/html5shiv.js"></script>
  <link rel="stylesheet" type="text/css" href="stylecss/bootstrap.min.rtl.css.css">
  <link rel="stylesheet" type="text/css" href="stylecss/bootstrap-3.2.rtl.css">
  <link rel="stylesheet" href="fa/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="stylecss/style.css">
  <link rel="stylesheet" type="text/css" href="font/stylesheet.css">
  <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/jscript.js"></script>
 </head>
 <body>
 <div class="best-sells col-md-12">
                        <!-- <h3>پرفروش ترین ها</h3> -->
                        <ul class="nav nav-tabs" role="tablist" data-toggle="tab">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#home" role="tab">تازه ترین</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#profile" role="tab">پرفروش ترین</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#messages" role="tab">محبوب ترین</a>
                            </li>
                        </ul>
                         <div class="tab-pane active" id="home" role="tabpanel">    
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                        </div>
                        <div class="tab-pane" id="profile" role="tabpanel">
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                        </div>
                         <div class="tab-pane" id="messages" role="tabpanel">
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                            <div class="book1">
                                <div class="sidebar-text">
                                    <p>پاییز فصل آخر سال است</p>
                                    <p>15000 تومان</p>
                                </div>  
                            </div>
                        </div>
                    </div>
             </body>
       </html>

jQuery part

   $(document).ready(function() {

     $('#tabs').tab();
   });

it's my fiddle

Upvotes: 0

Views: 189

Answers (1)

AshboDev
AshboDev

Reputation: 370

Right, you need to:

  • Remove the data-toggle="tab" attribute from the <ul>
  • Add the .active class to the <li> not the <a>
  • Wrap the tabs in a div with the .tab-content class

I've created a working fiddle for you: https://jsfiddle.net/a866Lgja/

You don't need the jQuery code either, that will make them jQuery tabs, not Bootstrap tabs: https://jqueryui.com/tabs/

Upvotes: 3

Related Questions