'how to Make Specific Tab "active" when going from different link in Bootstrap 3.0

I have a problem in loading specific tab as active when going from different link. What i want to do actually is, place a content using Bootstrap Tab and i want them to use as menu, so whenever i click the menu from the same page or even from a different page, i want it to go to specific page and make the specific tab "active"

How is this possible, i tried lot of resources in bootstrap and its not working.

<table class="nav-tabs" cellspacing="0">
        <tr>
          <td><a class="active" href="#payment_tab" data-toggle="tab">Payment Services</a></td>
          <td><a href="#pci_tab" data-toggle="tab">PCI Compliance - Link</a></td>
          <td><a href="#marketing_tab" data-toggle="tab">Marketing</a></td>
          <td><a href="#support_tab" data-toggle="tab">Support & Service</a></td>
        </tr>
      </table>

ANd the link i am trying to do is http://www.anjan.com.np/boom/merchants.html

Thank you in advance

New changes made:

<table class="nav nav-tabs">
<tr>
  <td><a href="#home" data-toggle="tab" class="active">Home</a></td>
  <td><a href="#profile" class="profile-link" data-toggle="tab">Profile</a></td>
  <td><a href="#messages" class="next-link" data-toggle="tab">Messages</a></td>
  </tr>
</table>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

Profile Link From Outside next

$(".outside-link").click(function() {
    $(".nav-tabs tr td a").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("td").find("a").addClass("active");
});

$(".next-link").click(function() {
    $(".nav-tabs tr td a").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("td").find("a").addClass("active");
});

can anyone help me to simplify this jQuery with generalization???

jqueryhtmlcsstwitter-bootstrap


Solution 1:[1]

/** Jquery Code on load **/

$(".nav-tabs").find("a").click(function(){
    $(".nav-tabs").find("a").removeClass("active");
    $(this).addClass("active");
});

Solution 2:[2]

html menu :

<!--SIDEBAR-->
<aside id="dx-sidebar">
    <ul>
        <li><a href="http://localhost/cms-dboxmint/app/reading"><i class="i i-desktop"></i>dashboard</a></li>
        <li><a href="http://localhost/cms-dboxmint/app/reading2"><i class="i i-list-alt"></i>GUI app</a></li>
        <li><a href=""><i class="i i-file-text"></i>posts</a></li>
        <li><a href=""><i class="i i-archive"></i>archive</a></li>
        <li><a href=""><i class="i i-book"></i>wiki</a></li>
        <li><a href=""><i class="i i-comments-o"></i>ngobrol</a></li>
        <li><a href=""><i class="i i-cogs"></i>setting</a></li>
    </ul>
</aside><!--END SIDEBAR-->

css style, (in bootstrap you can replace with active ), for xample yuo can visit here http://getbootstrap.com/examples/navbar/ :

.activexx{
  color: red!important;
}

jquery script :

$(document).ready(function() {
    var currentPage = document.location.href.substr(0); //get current page url
    $("#dx-sidebar ul li a").each(function(num, val){
        if($(val).attr('href') == currentPage){
            $(val).addClass('activexx');
        }else{
            $(val).removeClass('activexx');
        }
    });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Manoj
Solution 2 denyptw

Related Questions