如何在Bootstrap 3.0中从不同链接进入时使特定选项卡“活动”

xlpyo6sf 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(156)

我有一个问题，在加载特定的选项卡作为活动时，从不同的链接。我想做的实际上是，放置一个内容使用Bootstrap选项卡，我希望他们作为菜单使用，所以每当我点击菜单从同一页，甚至从不同的网页，我希望它去特定的网页，并使特定的选项卡“活动”
这怎么可能，我尝试了很多资源在 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吗？2？

twitter-bootstrap

来源：https://stackoverflow.com/questions/21429312/how-to-make-specific-tab-active-when-going-from-different-link-in-bootstrap-3

2条答案

按热度按时间

n1bvdmb61#

/加载时的Jquery代码/

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

赞(0）回复(0）举报 2022-12-07

scyqe7ek2#

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替换），例如，你可以访问这里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');
        }
    });
});

赞(0）回复(0）举报 2022-12-07

我来回答

如何在Bootstrap 3.0中从不同链接进入时使特定选项卡“活动”

2条答案

相关问题

热门标签

最新问答