Question

我试图在我的代码中使用bootstrap选项卡，但它似乎不起作用。标签显示，但当我点击它们没有任何反应，所有内容显示。我写的代码与bootstrap相同文件和我无法弄清问题在哪里？我已经阅读了Twitter Bootstrap tabs not working for 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部分

   $(document).ready(function() {

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

它是我的fiddle

Answer 1

是的，你需要：

从data-toggle="tab"

<ul>

将.active课程添加到<li>而不是<a>
使用.tab-content类

我为你创造了一个工作小提琴：https://jsfiddle.net/a866Lgja/

您也不需要jQuery代码，这将使它们成为jQuery选项卡，而不是Bootstrap选项卡：https://jqueryui.com/tabs/

Twitter Bootstrap选项卡不能正常工作

1 个答案: