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 :)
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>
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 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>
I am trying to detect when a tab is shown through Vanilla JS and the event isn't working. I have looked through multiple questions about this and none of them seem to help. Here is my current code.
var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
console.log(aTabs[i].id);
aTabs[i].addEventListener('shown.bs.tab', function(e) {
console.log("Showing content for tab: " + e.target.href);
}, false);
}
<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
</li>
</ul>
<div class="tab-content" id="tab-navigation-content">
<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
<div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
<div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
<div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>
I have the console logs to make sure I am getting all the correct values and those are correct however the addEventListener isn't adding the event. When I click through tabs they do not trigger.
All the console logs show the correct elements, just the event isn't fired when switching between tabs.
According to this Stack Overflow post, you cannot use ".addEventListener" for custom jQuery events (e.g. "shown.bs.tab").
I cannot say why the jQuery ".on" version wouldn't work, though.
Your AddEventListener was wrong, as you weren't telling it what event you wanted to listen too. If you wanted to listen to the tab selection you should pass the click event handler.
Here is a JSFiddle as a sample http://jsfiddle.net/97nq823z/
var aTabs = document.querySelectorAll('a[data-toggle="tab"');
console.log(aTabs);
for (let i = 0; i < aTabs.length; i++) {
console.log(aTabs[i].id);
aTabs[i].addEventListener('click', writeToConsole(aTabs[i]));
}
function writeToConsole(tab) {
console.log(tab);
}
<ul class="nav nav-tabs" id="tab-navigation" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1link" data-toggle="tab" href="#1" role="tab" aria-controls="community" aria-selected="true">1 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="2link" data-toggle="tab" href="#2" role="tab" aria-controls="2" aria-selected="false">2 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="3link" data-toggle="tab" href="#3" role="tab" aria-controls="3" aria-selected="false">3 <span class="badge badge-primary"></span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="4link" data-toggle="tab" href="#4" role="tab" aria-controls="4" aria-selected="false">4 <span class="badge badge-primary"></span></a>
</li>
</ul>
<div class="tab-content" id="tab-navigation-content">
<div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="tab1"></div>
<div class="tab-pane fade" id="2" role="tabpanel" aria-labelledby="tab2"></div>
<div class="tab-pane fade" id="3" role="tabpanel" aria-labelledby="tab3"></div>
<div class="tab-pane fade" id="4" role="tabpanel" aria-labelledby="tab4"></div>
</div>
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?