symon symon -4 years ago 82
CSS Question

How can I load a tab via a link on my web application?

thanks for your time firstly.

Problem: I am trying to link to a profile page on my web application from a number of different places, how can I have a button redirect to a certain tab on this page?

<div class="row">
<div class="col-lg-12">
<div class="card card-tab">
<div class="card-header">
<ul class="nav nav-tabs">
<li role="tab1" class="active">
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="tab2">
<a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Alerts</a>
</li>
<li role="tab3">
<a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Settings</a>
</li>
<sec:authorize access="hasRole('ADMIN')">
<li role="tab4">
<a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Admin</a>
</li>
</sec:authorize>
</ul>
</div>


When I click a tab I can see it will be amending the url to /profile#tab1/2/3 etc however linking to that directly just displays the profile page.

https://github.com/symonk/Release-Management/blob/master/Releases/src/main/webapp/WEB-INF/views/profile.jsp

I'm guessing some Javascript will do the trick, but im not really sure where to begin

Answer Source

I browsed the link you gave, you use Bootstrap for the tabs and I noticed you also use jQuery. A solution for you might be to use anchors in URL and activate the tab based on this. For example if you go to http://sample-env.qp3bsthmnq.eu-west-2.elasticbeanstalk.com/profile#tab3

After having added this in your code :

var loadTab = function() {
    var tabId = location.hash;
    if(tabId !== undefined && $('.nav-tabs a[href="' + tabId + '"]') !== undefined) {
        $('.nav-tabs a[href="' + tabId + '"]').tab('show');
    }
};

$(document).ready(function() {
    loadTab();
});

This must have activated the tab with id #tab3

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download