Why my Bootstrap 4 tabs don't deactivate?
Question
When I click the tabs 1-4, they get active, but they don't deactivate. Once clicked, every tab stays active and highlighted until reloading the page. What should I do to make sure only one tab can be active at the same time?
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h2 class="display-4 text-center py-5 my-4">Meet the Speakers</h2>
<div class="nav justify-content-center nav-pills flex-column flex-md-row">
<a class="nav-link" href="#stare" data-toggle="tab">Stara baba 1</a>
<a class="nav-link" href="#baby" data-toggle="tab">Stara baba 2</a>
<a class="nav-link" href="#jebac" data-toggle="tab">Stara baba 3</a>
<a class="nav-link" href="#pradem" data-toggle="tab">Stara baba 4</a>
</div>
<div class="tab-content py-5">
<div class="tab-pane" id="stare">Stare</div>
<div class="tab-pane" id="baby">Baby</div>
<div class="tab-pane" id="jebac">Jebać</div>
<div class="tab-pane" id="pradem">Prądem</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
2 answers
solution1
1 2017-07-18 16:21:56
I had a similar issue and used this simple fix:
$(".nav-link").click( function() {
$(".nav-link").removeClass("active");
});
I hope this helps.
solution2
0 ACCPTED 2017-06-26 21:46:04
I haven't tried Bootstrap 4, so I'm not sure if it has any issues. Remember that it is alpha, so issues are to be expected. Your tabs work as expected in Bootstrap 3.3.7, but you'll have to use ul . Here is the modified code:
<!DOCTYPE html> <html lang="pl"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap</title> <!-- Bootstrap CSS --> <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">--> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h2 class="display-4 text-center py-5 my-4">Meet the Speakers</h2> <ul class="nav nav-pills nav-stacked"> <li data-toggle="pill"><a class="nav-link" href="#stare" data-toggle="tab">Stara baba 1</a></li> <li data-toggle="pill"><a class="nav-link" href="#baby" data-toggle="tab">Stara baba 2</a></li> <li data-toggle="pill"><a class="nav-link" href="#jebac" data-toggle="tab">Stara baba 3</a></li> <li data-toggle="pill"><a class="nav-link" href="#pradem" data-toggle="tab">Stara baba 4</a></li> </ul> <div class="tab-content py-5"> <div class="tab-pane" id="stare">Stare</div> <div class="tab-pane" id="baby">Baby</div> <div class="tab-pane" id="jebac">Jebać</div> <div class="tab-pane" id="pradem">Prądem</div> </div> <!-- jQuery first, then Tether, then Bootstrap JS. --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap tabs don't deactivate
Why isn't my JavaScript loading in Bootstrap tabs?
Bootstrap - Tabs in modal don't work
Why my dataTables in bootstrap don't see the data included?
Why tabs don't worknig on uiv VueJS?
Why are my angular-bootstrap tabs not rendering?
Bootstrap 4 tabs don't work in Wordpress Understrap theme
Bootstrap AJAX tabs don't work, nothing happens
Bootstrap tabs don't function properly inside a modal
Bootstrap 4.0 tabs don't switch the tab panes
Related Tags