Twitter Bootstrap 选项卡无法正常工作答案

【问题标题】：Twitter Bootstrap tabs not working wellTwitter Bootstrap 选项卡无法正常工作
【发布时间】：2016-07-26 18:44:09
【问题描述】：

我正在尝试在我的代码中使用引导选项卡，但它似乎不起作用。选项卡会显示，但是当我单击它们时没有任何反应并且所有内容都会显示。我编写的代码与引导文档和我想不通问题出在哪里？我已经阅读了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

【问题讨论】：

更正你的小提琴...将 js 添加到 js 部分但不添加到 css。
@Leothelion 更正它。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

对，你需要：

从<ul> 中删除data-toggle="tab" 属性
将.active 类添加到<li> 而不是<a>
使用 .tab-content 类将选项卡包装在 div 中

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

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

【讨论】：