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?
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>
<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="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">This is home text</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is profile text</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is contact text</div>
</div>
Please check the code and guide me what I am doing wrong? Whenever I select the tab from nav-tab. My contact is not changing.
I need to move my nav tab to the subscribtion tab if a condition is met.I am blank without any idea. Any of your help is much appreciated.
My HTML code:
<div class="matches-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="upcoming-matches-tab" data-toggle="tab" href="#upcoming-matches" role="tab" aria-controls="upcoming-matches" aria-selected="false">Upcoming Matches</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="Subscription" aria-selected="false">Subscription</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="all-matches" role="tabpanel" >
Tab 1
</div>
<div class="tab-pane fade" id="upcoming-matches" role="tabpanel">
Tab 2
</div>
<div class="tab-pane fade" id="Subscription" role="tabpanel">
Tab 3
</div>
</div>
</div>
If the condition
if ($scope.balance >= matchfee){
//change the tab to subscription tab
}
is met change my tab to subscription.
As far as I can understand from your html code. You need to bind your html data from angularJS controller. EG. https://material.angularjs.org/latest/demo/tabs 'Dynamic Tabs'. For now you can only make it with CSS selectors only
But if you do not want to dynamically manage your tabs you can use ng-class like
<li class="nav-item" role="presentation"><a class="nav-link active" id="all-matches-tab" data-toggle="tab" href="#all-matches" role="tab" aria-controls="all-matches" aria-selected="true">Home</a></li>
To => ng-class="isActiveTab ? 'active' : '' "
I have the following html code:
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
I want that when I click on the second tab "Profile" it redirects to a new link (ad example "myapp/test").
How could I do it?
Correct me if I am wrong: If the user clicks on the Profile tab, this should navigate to another site instead of opening the Profile tab.
Remove the data-toggle from the <a> element and put your link inside the href attribute. The data-toggle attribute tells Bootstrap what to do if the user clicks in that element. Bootstrap uses the 'href` attribute to find the corresponding element.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="myapp/test" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</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>