我正在尝试在我的代码中使用 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
最佳答案
对了，你需要:
- 删除
data-toggle="tab"来自<ul>的属性 - 添加
.active类到<li>不是<a> - 用
.tab-content将标签包裹在一个 div 中类
我为您创建了一个可用的 fiddle :https://jsfiddle.net/a866Lgja/
您也不需要 jQuery 代码，这将使它们成为 jQuery 选项卡，而不是 Bootstrap 选项卡:https://jqueryui.com/tabs/
关于javascript - Twitter Bootstrap 选项卡运行不正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38587184/