Using Django Framework, Bootstrap v4.5.2.
<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
</li>
</ul>
<div class="tab-content pb-3" id="pills-tabContent">
<div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
<a class="btn btn-primary btnNext">Next →</a>
</div>
<div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
← Previous
Next →
</div>
<div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
← Previous
</div>
</div>
<script type="text/javascript">
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
</script>
I tried all the javascript seeing stackoverflow others answer but this does not work for me
How can I solve this to work perfectly?
If anything is a mistake on my code or you want to give me some suggestions, then reply to me.
Please try this,
You can add e.preventDefault(); in click() event.
base.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Then add in Bootstrap Pills Tab's html instead of adding CDN.
{% extends "base.html" %}
$('.btnNext').click(function(e) {
e.preventDefault();
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(e) {
e.preventDefault();
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
</li>
</ul>
<div class="tab-content pb-3" id="pills-tabContent">
<div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
<a class="btn btn-primary btnNext">Next →</a>
</div>
<div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
← Previous
Next →
</div>
<div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
← Previous
</div>
</div>
Related
I read the Bootstrap Introduction, the Navs and tabs page, this answer and many other, still I cannot figure out what is my mistake.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
<button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>
<div class="tab-content">
<div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
aaaaa
</div>
<div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
bbbbb
</div>
</div>
As you can see the tabs does not toggle.
From what I learnt:
include JQuery before Bootstrap: done
set data-bs-toggle and data-bs-target: done
use classes like nav-link, tab-pane, etc... : done
What still am I missing?
It wasn't easy to spot but you have an error on your second button
you put data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" into the <i> tag
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
<button class="nav-link" data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i class="bi-download" ></i> Upgrades</button>
</div>
<div class="tab-content">
<div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
aaaaa
</div>
<div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
bbbbb
</div>
</div>
Is it possible to swap the first tab with an active one on click?
I have a simple Bootstrap tabs and broke my head trying to replace the first tab with an active one.
So that when I clicked on tab "D" it swaps places with tab "A".
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>bootstrap 4 vertical tabs</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A" role="tabpanel">A Content</div>
<div class="tab-pane" id="B" role="tabpanel">B Content</div>
<div class="tab-pane" id="C" role="tabpanel">C Content</div>
<div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>
</div>
My current JS knowledge is temporarily poor so I would really appreciate any help.
To achieve this you can use prependTo() to move the clicked tab to the first position in the list. You can see this working in the example below. I would strongly suggest you do not do this, as it's incredibly annoying behaviour and not clear to your users why tabs are moving around.
let $navlinks = $('.nav-link').on('click', e => {
$navlinks.removeClass('active');
$(e.target).prependTo('ul.nav');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>bootstrap 4 vertical tabs</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A" role="tabpanel">A Content</div>
<div class="tab-pane" id="B" role="tabpanel">B Content</div>
<div class="tab-pane" id="C" role="tabpanel">C Content</div>
<div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>
</div>
I'm trying to use bootstrap's card/tab feature to create a tabulated card that has 3 tabs, each corresponding to it's own active 'card body'
My current code:
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="insta">Instagram</div>
<div id="face">Facebook</div>
<div id="twit">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
Creates the card correctly, and it indeed shows the appropriate tab headers with their respective links.
What I'm trying to do is make it so that if the Instagram tab is active, it shows the text 'Instagram'. Same for the other 2. Currently they are just inactive tabs and the main tab's body shows all three lines of text.
The javascript looks right but it's just not tabulating properly
Here's the codepen:
https://codepen.io/anon/pen/gKLJrm
You need to the use the appropriate markup for tabs with tab-content and tab-pane to make the tabs work: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
(no jquery is needed)
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
Notice both the nav-link and tab-pane have the active item set.
I hope this solves your problem
$(document).ready(function() {
$('.nav-item a').on('click', function(e){
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
li.nav-item.active a {
background: #fff;
border: 1px solid #eee;
border-bottom: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTabs">
<li class="nav-item active">
<a class="nav-link" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
I am attempting to make an example prototype that uses two cards from Bootstrap 4 to show the information from a form and hold the information from a second related form in the second card. Right now, it looks like this:
Here is a JSFiddle with the code which i've already taken the step of introducing a specific class and selector in the style tag.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
div.card {
max-height: 50%;
min-height: 30%;
}
.wuformheader {
color: white;
padding-bottom: 0px;
background-color: blue;
}
ul.nav-tabs {
border-bottom: 0px;
}
div.card-header li.nav-item> a.active {
color: black;
background-color: white;
}
div.card-header li.nav-item> a {
color: white;
}
</style>
<title>Review Template</title>
</head>
<body>
<div class="card">
<div class="card-header wuformheader">
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="nav-formTabContent">
<div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
Study Tab!
</div>
<div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
Department Tab!
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
Contacts Tab!
</div>
<div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
Labs!
</div>
<div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
formapprovals!
</div>
</div>
</div>
</div>
<br/>
<div class="card">
<div="card-header wuformheader">
<ul class="nav nav-tabs" id="review-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
</li>
</ul>
</div>
<div="card-body">
<div class="tab-content" id="nav-reviewTabContent">
<div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
Notes tab
</div>
<div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
Criteria Tab
</div>
<div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
Approvals
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
What needs to change for both cards to have the correct (Top in the image) styling?
You have a typo in your html on line 83 in your jsfiddle:
<div="card-header wuformheader">
It should be:
<div class="card-header wuformheader">
You deleted the word "class"
<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">
<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>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">1</div>
<div class="tab-pane" id="profile" role="tabpanel">2</div>
<div class="tab-pane" id="messages" role="tabpanel">3</div>
<div class="tab-pane" id="settings" role="tabpanel">4</div>
</div>
If i replaced the numbers in the tabs with youtube embeded iframes video, How can i refresh tabs everytime i move between tabs? Because if i played video in first tab then moved to the next tab, the first tab would still play and consume the visitor internet