0
私のコードでブートストラップタブを使用しようとしていますが、動作しないようです。タブが表示されますが、クリックすると何も起こらず、すべてのコンテンツが表示されます。ブートストラップの文書と同じですが、どこに問題があるのかわかりません。 すでにTwitter Bootstrap tabs not working for me号を読んでいますが、それは私を助けません。Twitterブートストラップのタブがうまく機能しない
<!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それを修正してください。 – mkafiyan