為什么我的Bootstrap 4標簽沒有停用？
[英]Why my Bootstrap 4 tabs don't deactivate?
問題描述
當我單擊選項卡1-4時，它們會激活，但不會停用。 單擊后，每個選項卡將保持活動狀態並突出顯示，直到重新加載頁面。 如何確保同一時間只能激活一個選項卡？
<!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 個解決方案
解決方案1
1 2017-07-18 16:21:56
我有一個類似的問題，並使用此簡單的修復程序：
$(".nav-link").click( function() {
$(".nav-link").removeClass("active");
});
我希望這有幫助。
解決方案2
0 已采納 2017-06-26 21:46:04
我還沒有嘗試過Bootstrap 4，所以不確定它是否有任何問題。 請記住，它是Alpha，所以會出現問題。 您的標簽頁可以在Bootstrap 3.3.7中按預期工作，但是您必須使用ul 。 這是修改后的代碼：
<!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>
Bootstrap 4選項卡在Wordpress Understrap主題中不起作用
[英]Bootstrap 4 tabs don't work in Wordpress Understrap theme
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.