Open an active tab from external link

Question

im working on a project with bootstrap 3. I want to link from the "home" page to a specific open tab. i read and test so many opportunities but nothing worked.

My latest here:

$activetabbuehne = (params.activeTab is null or params.activeTab == 'tab_a') ? 'class="active"' : '';
$activetabhoehe = (params.activeTab == 'tab_b') ? 'class="active"' : '';
$activetabaudio = (params.activeTab == 'tab_c') ? 'class="active"' : '';
$activetabstudio = (params.activeTab == 'tab_d') ? 'class="active"' : '';
$activetabsonder = (params.activeTab == 'tab_e') ? 'class="active"' : '';
$activetabinstall = (params.activeTab == 'tab_f') ? 'class="active"' : '';

<ul class="nav nav-pills nav-stacked col-xs-12 col-md-4">
  <li $activetabbuehne><a href="#tab_a" data-toggle="pill" style="font-weight:500;">BÜHNENBAU<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabhoehe><a href="#tab_b" data-toggle="pill" style="font-weight:500;">HÖHENARBEITEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 26px;color: #db001b;">+</span></a></li>
  <li $activetabaudio><a href="#tab_c" data-toggle="pill" style="font-weight:500;">AUDIO-, VIDEO-, LICHTTECHNIK<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabstudio><a href="#tab_d" data-toggle="pill" style="font-weight:500;">STUDIO<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabsonder><a href="#tab_e" data-toggle="pill" style="font-weight:500;">SONDERLÖSUNGEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabinstall><a href="#tab_f" data-toggle="pill" style="font-weight:500;">INSTALLATIONEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
</ul>

Here is the Link i use for the tests on the dev.page:

https://amphire.de/dev/leistungen/?activeTab=tab_a

Thanks for helping.

Are you mixing languages? It looks like you are trying to print a JS string in HTML just by placing it in the tag. Unless you are using some framework that process the code, that won't work — Alvaro Montoro, Jun 23 '15 at 13:21
Thx, i used the following answer to build it in my own. I found the solution very interesting if it worked :) http://stackoverflow.com/a/9441158 — Junes, Jun 23 '15 at 13:51
That solution is in pseudo-code. You need to adapt it to JS and to your particular case (still it won't work as it will only highlight the link but not show the content) — Alvaro Montoro, Jun 23 '15 at 13:53

score 0 · Accepted Answer · edited May 23 '17 at 11:51

One possible JavaScript solution for what you want to do would be to trigger the click event on the link specified by the parameter. It would work like this:

Read the parameter from the URL (you can use this solution by Haim Evgi)
After the links have been displayed on the page, trigger the click for the corresponding link.

This would be a sample code:

<ul class="nav nav-pills nav-stacked col-xs-12 col-md-4">
  <li><a href="#tab_a" data-toggle="pill" style="font-weight:500;">BÜHNENBAU<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_b" data-toggle="pill" style="font-weight:500;">HÖHENARBEITEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 26px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_c" data-toggle="pill" style="font-weight:500;">AUDIO-, VIDEO-, LICHTTECHNIK<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_d" data-toggle="pill" style="font-weight:500;">STUDIO<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_e" data-toggle="pill" style="font-weight:500;">SONDERLÖSUNGEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_f" data-toggle="pill" style="font-weight:500;">INSTALLATIONEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
</ul>

<script type="text/javascript">

// function from https://stackoverflow.com/a/979997/3695983
function gup( name, url ) {
  if (!url) url = location.href
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( url );
  return results == null ? null : results[1];
}

// get the value of the activeTab parameter
var targetTab = gup("activeTab", window.location.href);

// trigger the click so that tab activates and shows content
$("a[href='#" + targetTab + "']").click();

</script>

Open an active tab from external link

1 Answers1