Joomla Extensions Club 20,483 posts

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#205505

How can we link to specific tabs? http://www.example.com/page#tab1 isn’t working. Here is default code which doesn’t work if I try http://www.example.com/page#profile to link to Profile tab.

<div class="row example-row example-navigation"><!-- Tabs -->
<div class="col-lg-8">
<h2>Tabs</h2>
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="disabled"><a>Disabled</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">Action</a></li>
<li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
<li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div id="home" class="tab-pane fade active in">
<p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
<p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
</div>
<div id="profile" class="tab-pane fade">
<p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
<p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
<p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
<p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
</div>
</div>
</div>
<!-- //Tabs --> <!-- Vertical Menus -->
<div class="col-lg-4">
<h2>Vertical Menus</h2>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Active Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li class="disabled"><a href="#">Disabled Menu Item</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- Vertical Menus --></div>
<!-- Tabs & Vertical Menus --></div>
<!-- //NAVIGATIONS -->
<p>*</p>

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#566930

Hi @suzanna,

I visited your site but see the tab and it works fine, could you please confirm your status or clarify a little bit so I can assist you better ?

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#566945

The tabs are working fine; however, I can’t link to a specific tab. Is that not possible?
For example, if I want to hyperlink from an article directly to tab2 using something like this

<a href="www.example.com/page-name#tab2"> click here </a>

I get tab1, not tab2 content.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#567025

Hi @suzanna,

Unfortunately, you cannot do that as the tab need “click event” to be triggered first in order to display active tab. By default, the first tab (or active tab is open)

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#567244

Thanks for the explanation.

Since tabs are data sets used to group and organize information, not being able to hyperlink to specific data in that set or a tab defeats the purpose of organizing information using tabs.

It would be nice if we could also link to a specific tab. I wish I knew how to send a feature request 🙂

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#567347

Hi @suzanna,

Actually it’s possible to do that but you will need a custom JS in order to achieve your goal. In this case, it better to hire a developer to implement the code for you if you’re not familiar with such task.

[suzanna Friend suzannaJoin date: August 2014Posts: 215Downloads:63Uploads:26 Thanks: 75 Thanked: 1 times in 1 posts]

#567413

Yes, but its not possible with the plugin which is my point. There are many, many plugins that will do this out-of-the-box. I made an argument from UX perspective and why this make sense (to me at least). I hope JA will consider adding this functionality to the plugin, and until then I’m using something else. 🙂

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#567559

Hi @suzanna,

Thanks for your suggestion, I passed your request to development team so they can have a look. Normally, if they decide the function is necessary and there’s enough request for it, they will update it for sure.

1 user says Thank You to Adam M for this useful post

1. suzanna

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#732669

Hi @suzanna,

Thanks for your suggestion, I passed your request to development team so they can have a look. Normally, if they decide the function is necessary and there’s enough request for it, they will update it for sure.

1 user says Thank You to Adam M for this useful post

1. suzanna

[Author]

Posts