i m using bootstrap 4 tabs/pills code from w3school.
But i am facing problem. like when i am clicking on any link active not changing it is static on 1st link
<ul class="nav nav-tabs control-btn">
<li class="active"><a data-toggle="tab" href="#quiz01" class="btn btn-info" role="button">01</a></li>
<li><a data-toggle="tab" href="#quiz02" class="btn btn-info" role="button">02</a></li>
<li><a data-toggle="tab" href="#quiz03" class="btn btn-info" role="button">03</a></li>
<li><a data-toggle="tab" href="#quiz04" class="btn btn-info" role="button">04</a></li>
<li><a data-toggle="tab" href="#quiz05" class="btn btn-info" role="button">05</a></li>
<li><a data-toggle="tab" href="#quiz06" class="btn btn-info" role="button">06</a></li>
<li><a data-toggle="tab" href="#quiz07" class="btn btn-info" role="button">07</a></li>
<li><a data-toggle="tab" href="#quiz08" class="btn btn-info" role="button">08</a></li>
<li><a data-toggle="tab" href="#quiz09" class="btn btn-info" role="button">09</a></li>
<li><a data-toggle="tab" href="#quiz10" class="btn btn-info" role="button">10</a></li>
</ul>
<div id="quiz01" class="tab-pane fade-in active">
<h3>Question 01.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry,
Lorem Ipsum is simply dummy text of the printing and typesetting industry?
</p>
<p><input type="radio" name="value01" value="01"> <b>1.</b>Option one</p>
<p><input type="radio" name="value01" value="02"> <b>2.</b>Option Two</p>
<p><input type="radio" name="value01" value="03"> <b>3.</b>Option Three</p>
<p><input type="radio" name="value01" value="04"> <b>4.</b>Option Four</p>
<!-- Modal footer -->
<div class="modal-footer">
<a class="btn btn-success btnNext">Save & Next</a>
</div>
</div>
I got and idea from my friend.
Actually this not working on bootstrap4.
so i did add this code inside script
$(".nav-tabs li a").click(function(){
$(".nav-tabs li").removeClass("active");
$(this).parent().addClass("active");
});
And now it is working.. Thanks
Tabbed navigation requires Jquery to work, and needs to be included in the head of your page. I used jQuery 3.2.1 slim minified. If you add Jquery to your header and follow this code pattern using Aria it will work.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
href="#nav-home" role="tab" aria-controls="nav-home" aria-
selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab"
href="#nav-profile" role="tab" aria-controls="nav-profile" aria-
selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
href="#nav-contact" role="tab" aria-controls="nav-contact" aria-
selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-
labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-
labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-
labelledby="nav-contact-tab">...</div>
</div>
Related
Just like in the Inception movie, I'm trying to make a main navbar menu with dynamic tabs that contains a second navbar menu that shows other content.
I started the first nav-tabs menu using the template found at the Bootstrap 5 documentation page and it's running fine but the second nav-tab menu complicates things when trying to make it be triggered by a tab on the first menu. This gif explains better what I'm trying to do.
This the code I've written so far:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="stat-tab" data-bs-toggle="tab" data-bs-target="#stat" type="button" role="tab" aria-controls="second-stat-tab" aria-selected="true">STAT</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="inv-tab" data-bs-toggle="tab" data-bs-target="#inv" type="button" role="tab" aria-controls="inv" aria-selected="false">INV</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#map" type="button" role="tab" aria-controls="map" aria-selected="false">MAP</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="radio-tab" data-bs-toggle="tab" data-bs-target="#radio" type="button" role="tab" aria-controls="radio" aria-selected="false">RADIO</button>
</li>
</ul>
<!-- BEGINNING OF SECOND TABLIST -->
<div class="tab-content" id="myTabContent">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<button class="nav-link" id="second-stat-tab" data-bs-toggle="tab" data-bs-target="#stat" type="button" role="tab" aria-controls="stat" aria-selected="true">STATUS</button>
</li><li class="nav-item">
<button class="nav-link" id="special-tab" data-bs-toggle="tab" data-bs-target="#special" type="button" role="tab" aria-controls="special">SPECIAL</button>
</li>
</ul>
</div>
<!-- END OF THE SECOND TABLIST -->
<!-- This is the content of the tabs-->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="stat" role="tabpanel" aria-labelledby="second-stat-tab">This is the status tab sample content
<div class="center-image">
<img src="vault_boy-removebg-preview_CROPPED.png" alt="">
</div>
</div>
<div class="tab-pane fade" id="special" role="tabpanel" aria-labelledby="special-tab">SPECIAL</div>
<div class="tab-pane fade" id="perks" role="tabpanel" aria-labelledby="perks-tab">PERKS</div>
</div>
In this pen you can see the full code and the way the it behaves. I want the second nav-tab menu to show only as a result of clicking on the first tab of the first menu (the one called "STATS") but it just remains there.
I have tried looking up how to use nav-fill to make the nav-pills extend the width of the card, but this function doesn't work at all for me. Even the copy pasted code from the documentation doesn't work. It displays the buttons but doesn't apply the nav-fill. Here is my code below:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
I tried to use #href on my buttons in order to get them to change to another tab but all it ends up doing is adding #name in the url. How can I make it so my next and previous buttons change to the respective tab?
<div class="card text-left">
<div class="card-header bg-danger">
<ul class="nav nav-tabs" data-background-color="red">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" style="color:white" href="#generalinfo">General Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#companyinfo">Company Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#socialmedia">Social Media</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="generalinfo" role="tabpanel">
<form action="" id="generalInfo">
Next
</form>
</div>
</div>
</div>
<div class="tab-pane" id="companyinfo" role="tabpanel">
<form action="" id="companyInfo">
Back
Next
</form>
</div>
Any help would be greatly appreciated.
I tried adding a tabbed nav to a page, like this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
But it was being displayed incorrectly:
So I switch from Bootstrap 4.0.0 to 3.3.7, and it appears properly, but my split dropdown menu button breaks.
<li class="nav-item">
<div class="btn-group">
<button type="button" class="btn btn-primary">{{ session.username }}</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="/get_messages">Messages</a>
<a class="dropdown-item" href="/get_friend_requests">Friend Requests</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout">Log Out</a>
</div>
</div>
</li>
How can I have both components display correctly? Switching between 4.0.0 and 3.3.7 breaks one or the other.
Nav-tabs work differently in bootstrap version 4, you need:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
Note sure about this, but bootstrap 4 documentation uses show class for the active tab-content (you may need to replace in with show):
<div id="home" class="tab-pane fade show active">
See here: W3Schools Bootstrap 4 nav-tabs
See here: Bootstrap 4 documentation
Below is my code. For some reason when I load the page the navbar shows the contents of "Home". When I click on the Menu tab every works properly. But for some reason when I click on the Scheme tab I only get the Home tab contents
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
<div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
<div class="input-group mb-3">
<ul>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
</div>
<input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
<ul id="dynamic-list"></ul>
</ul>
</div>
</div>
<div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
</div>
</div>
I feel like it must be something really simple, thanks in advance.
Your code looks fine to me, and should work. I suspect there is an issue with how you are loading your jQuery and Bootstrap JS and CSS files. Check the console to see if there are any errors.
Here is a working sample of your code - where I am simply using the latest jQuery & Bootstrap CDN files:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
<div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
<div class="input-group mb-3">
<ul>
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
</div>
<input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
<ul id="dynamic-list"></ul>
</ul>
</div>
</div>
<div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
</div>
</div>