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>

我想要做的链接是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样式，（在bootstrap中你可以用active替换），xample yuo可以访问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');
        }
    });
});

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

2 个答案: