Question

我在下面的选项卡列表上遇到了一些麻烦：

      <ul class="nav nav-tabs" data-tabs="tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="{$PageUrl}" role="tab">View</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{$PageUrl}?action=edit" role="tab">Edit</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  href="{$PageUrl}?action=diff" role="tab">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  href="{$PageUrl}?action=print" role="tab">Print</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  href="{$PageUrl}?action=attr" role="tab">Attributes</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu" aria-labelledby="dropdown2">
                                <a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
                                    <a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
                            </div>
                    </li>
                </ul>

一切正常，但这与许多人实现标签的方式不同。我看到的大多数示例都有“ tab-content”，并显示每个标签的内容。就我而言，我使用标签将替代页面链接在一起。这就是我的问题所在，当单击“编辑”选项卡时，确实确实加载了编辑页面，但活动类或“视图”选项卡仍处于活动状态。我无法让活动班级在标签之间切换。我认为这是因为页面正在重新加载，因此消除了活动数据并将其设置为默认值。在新选择的页面加载后，如何解决此问题并使它显示正确的活动选项卡？感谢您的帮助！

编辑：

以前，我一直试图在运气不好的时候使用它：

$(function(){
var current = location.pathname;
$('#nav li a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
    if($this.attr('href').indexOf(current) !== -1){
        $this.addClass('active');
    }
})

}）

Answer 1

这是一个可能的解决方案：

<ul class="nav nav-tabs" data-tabs="tabs" role="tablist">
    <li class="nav-item">
        <a class="default nav-link" href="{$PageUrl}" role="tab">View</a>
    </li>
    <li class="nav-item">
        <a class="edit nav-link" href="{$PageUrl}?action=edit" role="tab">Edit</a>
    </li>
    <li class="nav-item">
        <a class="diff nav-link"  href="{$PageUrl}?action=diff" role="tab">History</a>
    </li>
    <li class="nav-item">
        <a class="print nav-link"  href="{$PageUrl}?action=print" role="tab">Print</a>
    </li>
    <li class="nav-item">
        <a class="attr nav-link"  href="{$PageUrl}?action=attr" role="tab">Attributes</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown2">
            <a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
            <a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
        </div>
    </li>
</ul>
<script>
$(function() {
    var action = (location.search.match(/(\^?|&)action=(.*?)($|&)/i) || [])[2]
    if(action) {
        $('a.nav-link.'+action).addClass('active')
    } else {
        $('a.nav-link.default').addClass('active')
    }
})
</script>

默认情况下不将active类添加到任何选项卡中。
所有选项卡链接都将其操作作为类进行操作，以简化操作
在加载时，查询将在窗口的地址中进行查询，并相应地设置活动类

使用引导程序4个选项卡时将活动类存储在本地存储中

1 个答案: