Change tabs according to the link

Question

How can i switch tabs with the links?

This is my current state

<div class="tabbable-panel">
  <div class="tabbable-line">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#tab_below_1" data-toggle="tab">Home</a>
      </li>
      <li class="">
        <a href="#tab_below_2" data-toggle="tab">Sources</a>
      </li>
      <li>
        <a href="#tab_below_3" data-toggle="tab">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

I can switch between tabs just fine but when i try to make it so that the href lead to another link, it doesn't work. when i change

<a href="#tab_below_1" data-toggle="tab">Home</a>

to

<a href="mysite.com/home" data-toggle="tab">Home</a>

it doesn't work. but then i tried removing the data-toggle and it opens the link but it doesn't show that the tab is active.

I could you replicate your issue , by removing the bootstrap.min.js file -http://codepen.io/nagasai/pen/JKEYod — Naga Sai A, Jun 24 '16 at 01:56
Can you try adding onclick event -onclick="location.href='mysite.com/home'" in anchor tag? — Naga Sai A, Jun 24 '16 at 03:27
Possible duplicate of [Linking to a Bootstrap Tab from outside - how to set the tab to "active"?](http://stackoverflow.com/questions/19814481/linking-to-a-bootstrap-tab-from-outside-how-to-set-the-tab-to-active) — Gleb Kemarsky, Jun 24 '16 at 07:03

score 0 · Answer 1 · answered Jun 24 '16 at 01:37

0

Remove the data-toggle and replace it with class="active"

<div class="tabbable-panel">
    <div class="tabbable-line">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_below_1">Home</a></li>
            <li><a href="#tab_below_2">Sources</a></li>
            <li><a href="#tab_below_3">Contact Us</a></li>
        </ul>
    </div>
</div>

answered Jun 24 '16 at 01:37

Michelle Ashwini

910
2
13
28

It goes to the page but it doesn't make the tab active. when the `
` is active, it's suppose to change background, but it doesn't when i replace it with `class="active"`

Dark Sterix

Jun 24 '16 at 01:43

score 0 · Answer 2 · answered Jun 24 '16 at 01:55

0

There could be two issues

1. bootstrap.min.js file is not added to the page

2.Specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

Codepen- http://codepen.io/nagasai/pen/JKEYod

answered Jun 24 '16 at 01:55

Naga Sai A

10,771
1
21
40

the id is suppose to be another page. for example, my site is `mysite.com/index.php` and when i click on contact tab, it goes to `mysite.com/contact-us.php`. BTW i checked and i had the bootstrap.min.js file loaded on the page – Dark Sterix Jun 24 '16 at 02:15

score 0 · Accepted Answer · answered Jun 25 '16 at 15:46

I figured it out with using some php. here's my code

 <div class="tabbable-panel">
  <div class="tabbable-line">
    <?php 
    $hom = @_URL.'/home.php'; 
    $sorc = @_URL.'/sources.php';
    $cont = @_URL.'/contact.php';
    $link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"
     ?>
   <ul class="nav nav-tabs">
    <li class="<?php if($link==$hom){echo "active";}else{echo "";}  ?>">
     <a  href="<?php echo $hom ?>">Home</a>
    </li>
    <li class="<?php if($link==$sorc){echo "active";}else{echo "";}  ?>">
     <a href="<?php echo $sorc ?>">Sources</a>
    </li>
    <li class="<?php if($link==$cont){echo "active";}else{echo "";}  ?>">
     <a href="<?php echo $cont ?>">Contact Us</a>
    </li>
   </ul>
  </div>
 </div>

and now it works perfectly

Change tabs according to the link

3 Answers3