mimi mimi - 4 months ago 10
HTML Question

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

Answer

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/

Comments