I need to click on a link and maintain a tab active,
this code are the tabs that are working right, maintaining the tab active:
<ul class="nav nav-tabs" role="tablist" id="MovieContent">
<li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['DUB'])">
<a class="tab nav-link" data-toggle="tab" href="#Dubled_{{mov.ID}}"
ng-class="{active: language=='dubbed'}" ng-click="language='dubbed'">
Dubbed
</a>
</li>
<li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['LEG'])">
<a class="tab nav-link" data-toggle="tab" href="#Legended_{{mov.ID}}"
ng-class="{active: language=='legended'}" ng-click="language='legended'">
Legended
</a>
</li>
<li class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['NAC'])">
<a class="tab nav-link" data-toggle="tab" href="#National_{{mov.ID}}"
ng-class="{active: language=='national'}" ng-click="language='national'">
National
</a>
</li>
</ul>
This is my attempt and it is not maintaining active the clicked tab, this code is inside the first tab only:
<div class="nav nav-tabs" role="tablist" id="MovieContent">
<div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['DUB'])">
<a class="tab nav-link" data-toggle="tab" href="#Dubled_{{mov.ID}}"
ng-class="{active: language=='dubbed'}" ng-click="language='dubbed'">
Dubbed
</a>
</div>
<div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['LEG'])">
<a class="tab nav-link" data-toggle="tab" href="#Legended_{{mov.ID}}"
ng-class="{active: language=='legended'}" ng-click="language='legended'">
Legended
</a>
</div>
<div class="nav-item" ng-show="checkLength(movieSessions[mov.ID]['NAC'])">
<a class="tab nav-link" data-toggle="tab" href="#National_{{mov.ID}}"
ng-class="{active: language=='national'}" ng-click="language='national'">
National
</a>
</div>
</div>
Related
I am looking to directly link to a bootstrap 5 button class tab.
I have tried implementing the following:
Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink
However, I did not have success.
My code is below for my nav-tabs and I setup my tab-pane according to: https://getbootstrap.com/docs/5.0/components/navs-tabs/#using-data-attributes
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="profile" aria-selected="false">Notes</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#nHistory" type="button" role="tab" aria-controlcontrols="contact" aria-selected="false">History</button>
</li>
<li class="nav-item ms-auto" role="presentation">
<i class="bi bi-x-lg"></i>
</li>
</ul>
What I am looking for is to link to something like mydomain.net/#notes and it select & open the notes tab.
Any help would be appreciated. Most solutions seem to be for bootstrap v4 and I cannot seem to port them.
You have to give ids in navigation buttons and corresponding tab content properly. Then only queryselector will select the proper tab.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="profile" aria-selected="false">Notes</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controlcontrols="contact" aria-selected="false">History</button>
</li>
<li class="nav-item ms-auto" role="presentation">
<i class="bi bi-x-lg"></i>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="general" role="tabpanel" aria-labelledby="general-tab">General</div>
<div class="tab-pane" id="notes" role="tabpanel" aria-labelledby="notes-tab">Notes.</div>
<div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">History</div>
</div>
<script>
var hash = location.hash.replace(/^#/, "");
if (hash) {
var triggerEl = document.querySelector("#"+hash+"-tab" );
var tab = new bootstrap.Tab(triggerEl);
tab.show();
}
</script>
I want to change a tab (Mathematic-tab)to a different href color (so I can't put .style.color = gold), when the value of 'aria-selected' from bootstrap becomes true. I currently have tabs of which mathematics tab is one and essentially I want to distinguish between a selected and unselected tab, but I'm not sure how as bootstrap uses Jquery which I don't know. My JS also doesn't work.
let mathsTab = document.getElementById('Mathematics-tab');
if (mathsTab.getAttribute('aria-selected') == "true") {
console.log("true");
// mathsTab.style.color = #f0a500;
} else {
// mathsTab.style.color = #1A1C20;
};
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>
I want to distinguish between a selected and unselected tab
Bootstrap uses the .active class to denote which element is active. Based on your existing classes just add the following CSS:
#myTab .gold-text.active {
color : gold;
}
Demo:
#myTab .gold-text.active {
color : gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>
Did you mean like that ?
let navItems = document.querySelectorAll('.nav-link');
navItems.forEach(item =>{
item.addEventListener("click", () => {
item.style.color = "#f0a500";
navItems.forEach(otherItem => {
if(otherItem !== item){
otherItem.style.color = "#1A1C20";
}
});
})
})
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>
I want to change a tab (Mathematic-tab)to a different href color (so I can't put .style.color = gold), when the value of 'aria-selected' from bootstrap becomes true.
You don't need to use JavaScript; instead you can do it using a CSS attribute selector .nav-link[aria-selected="true"] to set the color.
Like this:
.nav-link[aria-selected="true"] {
color: gold;
}
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>
If you want to restrict it to just the Mathematics tab then you can use #Mathematics-tab[aria-selected="true"] to filter on the element's ID rather than the nav-link class.
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 :)
I'm a big fan of http://thednp.github.io/bootstrap.native/ which is a vanilla JS version of Bootstrap. Following their docs, I did this:
<!-- Nav tabs -->
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item active">
<a id="home-tab" class="nav-link" href="#home" data-toggle="tab" data-height="true" aria-controls="home" aria-selected="true" role="tab">Home</a>
</li>
<li role="presentation" class="nav-item">
<a id="profile-tab" class="nav-link" href="#profile" data-toggle="tab" data-height="true" aria-controls="profile" aria-selected="false" role="tab">Profile</a>
</li>
<li role="presentation" class="nav-item">
<a id="messages-tab" class="nav-link" href="#messages" data-toggle="tab" data-height="true" aria-controls="messages" aria-selected="false" role="tab">Messages</a>
</li>
<li role="presentation" class="nav-item">
<a id="settings-tab" class="nav-link" href="#settings" data-toggle="tab" data-height="true" aria-controls="settings" aria-selected="false" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" aria-labelledby="home-tab" id="home">.1</div>
<div role="tabpanel" class="tab-pane" aria-labelledby="profile-tab" id="profile">2</div>
<div role="tabpanel" class="tab-pane" aria-labelledby="messages-tab" id="messages">3</div>
<div role="tabpanel" class="tab-pane" aria-labelledby="settings-tab" id="settings">4</div>
</div>
But when you click a tab, nothing happens. When this HTML is in the page, it also prints Uncaught TypeError: Cannot read property 'parentNode' of null into the console.
When I try the JS approach by using new Tab() it also says that Tab is not defined.
How can this be fixed?
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