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

【问题标题】：Storing active class in local storage when using bootstrap 4 tabs使用引导程序 4 选项卡时将活动类存储在本地存储中
【发布时间】：2019-07-31 19:21:16
【问题描述】：

我在使用下面的标签列表时遇到了一些问题：

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

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

编辑：

以前我试图在我的身体底部使用它但没有运气：

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

})

【问题讨论】：

我认为你想要复杂的方式。如果我猜对了，您将使用新标签的内容重新加载整个页面，并且您也希望使其处于活动状态。正确的？如果{$PageUrl} 中的代码也生成了这个html sn-p，那么您应该相应地为正确的选项卡生成active 类。即使您正在调用其他一些服务器端代码来执行此操作，您也应该将此信息传递给该部分代码。
好的，明白了，您不能（不想）更改服务器端代码。我不知道那个cms。问题：例如，按下 Edit 后，您的浏览器地址栏是什么样的？仍然包含?action=edit 查询参数（是否使用重定向）？
它只是附加了当前的 URL，所以没有重定向。 ?action=edit 在网址中。更改服务器端代码是我研究并丢失的东西。我知道使用 jQuery 可以做到这一点，但经过多次失败的尝试后，我来这里寻求帮助。
那么这是一个解决方案：1）不要将active添加到您的sn-p。 2) 为页面加载添加一个事件处理程序（或在页面末尾添加一个脚本），该处理程序检查操作值并将active 类添加到propet 元素。

标签： javascript jquery tabs bootstrap-4

【解决方案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 类添加到任何选项卡。
所有选项卡链接都有其作为类的动作，以使其变得简单
加载时检查窗口地址中的查询，并相应地设置活动类

【讨论】：

这已确认有效。感谢您的帮助！