引导程序。在新页面上保持活动课程答案

【问题标题】：Bootstrap. Keep active class on new page引导程序。在新页面上保持活动课程
【发布时间】：2016-11-16 16:41:24
【问题描述】：

我在将“活动”类添加到我的标签时遇到了问题。当我单击它时，我知道如何将活动类添加到选项卡。但我不知道如何在页面重新加载后在选项卡上保存活动类。

我的jsp代码的一部分

<div class="row top-buffer">
    <div class="col-md-10 col-md-offset-1 products">
        <ul class="nav nav-pills cat-nav">
            <c:forEach items="${catList}" var="category">
                <li role="presentation" >
                    <a href="/show-category?id=${category.id}" >${category.name}</a>
                    <ul class="dropdownn">
                        <c:forEach items="${category.childCategories}" var="childCat">
                            <li><a href="/show-category?id=${childCat.id}">${childCat.name}</a> </li>
                        </c:forEach>
                    </ul>
                </li>
            </c:forEach>
            <li role="presentation" class="pull-right"><a href="/show-category?id=0">All</a> </li>
        </ul>
    </div>
</div>

添加活动类的脚本

$(document).ready(function () {
    $('.cat-nav li a').click(function(e) {

        $('.cat-nav li').removeClass('active');

        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
    });
});

当我单击链接时，它会将我发送到另一个页面，但另一个页面没有活动课程。那么我如何“保存”或“保持”活动课程并放入新页面。

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

在您的点击处理程序中，您正在添加和删除<li> 元素上的“活动”类。在引导程序中，“活动”类被应用于 <a> 元素。对您的代码稍作调整即可：

$('.cat-nav li a').click(function() {
     $('.cat-nav li a').removeClass('active');
     $(this).addClass("active");
});

codepen 中的示例链接： http://codepen.io/johnwilson/pen/akVgxq

【讨论】：

感谢您帮助我。但这并没有解决我的问题。我将尝试更清楚地描述我的问题。每个选项卡都有指向另一个页面的链接。所有这些页面都有相同的标签面板。是的，当我单击选项卡时变为“活动”一秒钟，然后它会加载新页面，并且新页面没有活动类。我想在新页面上保存这个活动课程。
将该活动指示/标志保存在客户端的 cookie 中或作为查询字符串传递到您的新页面。当然，您需要在加载新页面时阅读这些标志。或者你应该考虑重新设计它的工作方式。

【解决方案2】：

我终于解决了！

$(document).ready(function () {
    var id = getParameterByName('id');

    $('.cat-nav li[role="presentation"]').each(function() {

        var id2 = $(this).attr("id");

        if(id == id2){
            $(this).addClass('active');
        }
    });
});

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';

    localStorage.setItem(name, results[2].replace(/\+/g, " "));
    var result = localStorage.getItem("id");
    return result;
}

<div class="row top-buffer">
    <div class="col-md-10 col-md-offset-1 products">
        <ul class="nav nav-pills cat-nav">
            <c:forEach items="${catList}" var="category">
                <li role="presentation" id="${category.id}">
                    <a href="/show-category?id=${category.id}" >${category.name}</a>
                    <ul class="dropdownn">
                        <c:forEach items="${category.childCategories}" var="childCat">
                            <li><a href="/show-category?id=${childCat.id}">${childCat.name}</a> </li>
                        </c:forEach>
                    </ul>
                </li>
            </c:forEach>
            <li role="presentation" class="pull-right" id="0"><a href="/show-category?id=0">All</a> </li>
        </ul>
    </div>
</div>

【讨论】：