如何从Bootstrap 3.0中的不同链接中使特定选项卡“激活”

Question

我有一个问题，加载特定的标签作为活动时，从不同的链接。我实际上想做的是，使用Bootstrap Tab放置一个内容，我希望它们用作菜单，所以每当我从同一页甚至不同的页单击菜单时，我希望它转到特定的页面并使特定的选项卡“活动”

这怎么可能，我在bootstrap中尝试了很多资源，但它不起作用。

<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我尝试做的链接是http://www.anjan.com.np/boom/merchants.html

提前谢谢你

所做的新更改：

<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>

下一步从外部链接配置文件

$(".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");
});

有人能帮我简化这个泛化的jQuery吗？

Answer 1

加载时的/** Jquery代码**/

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

Answer 2

html菜单：

<!--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，(在bootstrap中你可以替换为active )，例如你可以访问这里http://getbootstrap.com/examples/navbar/：

.activexx{
  color: red!important;
}

jquery脚本：

$(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');
        }
    });
});