I have nav-tabs in my page.
When someone clicks on a certain tab I want a div to be visible that's hidden.
<li role="presentation" class="active"> Annual Adult</li>
<li role="presentation" class=""> Annual Junior & Student</li>
<li role="presentation" id='monthly' class="">Corporate</li>
<div class='show'>Some content </div>
<style>
.show{display:none;}
</style>
<script>
$(document).ready(function(){
if ($("#monthly").hasClass("active")) {
$('.show').show();
}
else{
$('.show').hide();
}})
</script>
Now let's say corporate is active I want another div to be shown else hidden but that's not working.
Try this:
$('yourTabSelector').on('click', function() {
$('.show').toggle();
});
Or if you want to make it work only once:
$('yourTabSelector').on('click', function() {
$('.show').show();
});
Please try with below code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.show{display:none;}
.active{background:pink;}
</style>
<script>
$(document).ready(function(){
if ($("li").hasClass("active")) {
$('.show').show();
}
else{
$('.show').hide();
}
$("li").on('click', function() {
$("li").removeClass('active')
$(this).addClass("active");
$('.show').text('you selected ' + $(this).text());
})
})
</script>
</head>
<body>
<li role="presentation" class="active"> Annual Adult</li>
<li role="presentation" class=""> Annual Junior & Student</li>
<li role="presentation" id='monthly' class="">Corporate</li>
<div class='show'>Some content </div>
</body>
</html>
Why not just use the tabs the way bootstrap suggests to use them:
<!-- Nav tabs -->
<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">... this is home</div>
<div class="tab-pane" id="profile" role="tabpanel">...this is profile</div>
<div class="tab-pane" id="messages" role="tabpanel">...this is messages</div>
<div class="tab-pane" id="settings" role="tabpanel">...this is settings</div>
</div>
Related
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 want the content of the .active class to show first when page load
but when I load the page the content of the first class show
this is my nav menu
<ul class="nav nav-pills navTab">
<li role="presentation" class="">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="info" aria-expanded="false">info</a>
</li>
<li role="presentation" class="active">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="servers" aria-expanded="true">watch</a>
</li>
<li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="download"> download</a>
</li>
<li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="selary"> selary</a>
</li>
<li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="comment"> comment</a>
</li>
</ul>
and this my content
<div class="getData">
<ul class="postInfo">
info content here
</ul>
</div>
<div class="getData">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="servers">
servers content here
</div>
</div>
</div>
</div>
the first class is postInfo, i want to show the content of the class row when page load
You need to explicitly open the tab after the page has loaded, something like:
$('.navTab .active').tab('show');
Try Following
$('li').each(function(i){
if($(this).hasClass('active'))
{
$(this).css('display','block');
}
else
{
$(this).css('display','none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-pills navTab">
<li role="presentation" class="">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="info" aria-expanded="false">info</a>
</li>
<li role="presentation" class="active">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="servers" aria-expanded="true">watch</a>
</li>
<li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="download"> download</a>
</li>
<li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="selary"> selary</a>
</li>
<li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="comment"> comment</a>
</li>
</ul>
<div class="getData">
<ul class="postInfo">
info content here
</ul>
</div>
<div class="getData">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="servers">
servers content here
</div>
</div>
</div>
</div>
thank you all, I found the issue, the problem was in the JS file, I was calling another file, so I change it to call servers.php, and it works :)
When a user clicks on the menu tab, I need the respective tab content to open and once the click on the menu tab again the content will close.
I've removed all the active class from both the tab menu and tab content .
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').toggleclass('active');
});
<!-- Nav tabs -->
<ul class="nav" role="tablist">
<li class="nav-item">
<a class="nav-link " 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" id="home" role="tabpanel">ZOOO</div>
<div class="tab-pane" id="profile" role="tabpanel">ABC</div>
<div class="tab-pane" id="messages" role="tabpanel">123</div>
<div class="tab-pane" id="settings" role="tabpanel">EFG</div>
</div>
This is fiddle Example
In my code i have bootstrap 4 Tab .I want first all the tab-content will be hide when i click tab li then the tab-contents will be shown.
For that i've removed the active class from tab-pane div so now at first contents are not showing and when i click on the tab li it is showing then but after i click on that li again it does not closing .
I want when again i click the tab li button the tab contents should be closed again.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" 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" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Just want when click the menu it will show the content and when click again the menu it should close.
Help me
Updated
Add this extra code to remove the active class on click again.
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
})
$(document).on('click','.nav-link.active', function(){
var href = $(this).attr('href').substring(1);
//alert(href);
$(this).removeClass('active');
$('.tab-pane[id="'+ href +'"]').removeClass('active');
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" 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" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Now its working
use following Bootstrap CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" 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" id="home" role="tabpanel">A</div>
<div class="tab-pane" id="profile" role="tabpanel">B</div>
<div class="tab-pane" id="messages" role="tabpanel">C</div>
<div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>
Add the following Bootstrap CDN to your code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
I am wondering why I can't get the bootstrap tabs to correspond to links. I've tried a bunch of solutions on stackoverflow, but the code structure all looks different than mine because I presume they're not bootstrap 4.
Here is the html from Tabs Using Data Attributes
<!-- Nav tabs -->
<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">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
Using this JS from another post does actually change the link to include #page when clicking on tabs, but if i enter that address, it always goes back to the homepage:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
I do apologize that this question has been asked in different iterations other places, but I have not seen the base question (i.e., how to do this with the starter code from bootstrap) answered.
Your markup is good.
Which means you probably have an error in your console. Please make sure you loaded these scripts, in this order:
jquery(.min).js
popper(.min).js (used to be tether(.min).js in older versions)
bootstrap(.min).js
There are many ways to get them, but the safest route is to go to Bootstrap v4 and scroll down to Bootstrap CDN.
Your markup + correct scripts =
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></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">Home</div>
<div class="tab-pane" id="profile" role="tabpanel">Profile</div>
<div class="tab-pane" id="messages" role="tabpanel">Messages</div>
<div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>
Note you do not need any extra javascript to make it work, it's all included into bootstrap.js.
You just have to include bootstrap.bundle.js along with jquery and bootstrap.js in following order
jquery.min.js
bootstrap.min.js
bootstrap.bundle.min.js