Question

我在母版页中为菜单创建了一些锚列表的列表项。默认情况下，只有一个是活动的单击其他项后，将为其分配活动类。但问题出现在页面导航之后。默认类再次变为活动状态。

 <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <ul>
                <li><a class="active" href="../Home.aspx">Home</a></li>
                <li><a href="../Office.aspx">Office</a></li>
                <li><a href="../Market.aspx">Market</a></li>
            </ul>
            <asp:UpdatePanel ID="upnlNavigation" runat="server" >
                <ContentTemplate>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        ---------CONTENT PAGE HOLDER------------
                    </asp:ContentPlaceHolder>
                </ContentTemplate>
            </asp:UpdatePanel>

我在主页中的jQuery如下：

$(document).ready(function () {
    $('a').click(function (e) {
        $('a').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
        window.location.replace($(this).attr('href'));
    });
});

Answer 1

使用window.location重定向时，它将重新加载页面，以便您松开活动类。

$(document).ready(function () {
    $('a').click(function (e) {
        $('a').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
// You can add an id to your a tags and set:
            var url = $(this).attr('href') + '?id=' + $(this).attr('id');
            window.location.replace(url);
        });
    });

然后：

//when document is ready, it reads the id on the url if there's some
$(document).ready(function(){
    if(var id = getUrlParameter('id')) $(id).addClass('active');
});

// this will get URL params:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

Answer 2

查看页面网址并在相应的菜单上设置类。有更好的方法可以做到这一点，但这个答案很容易理解。

$(document).ready(function () {
    ...your existing code...
    var page = document.location;
    if(page.indexOf("Office") > -1) {
       $('#Office').addClass('active');
    }
    .... etc ...
});

新加价

<ul>
    <li><a id="Home" href="../Home.aspx">Home</a></li>
    <li><a id="Office" href="../Office.aspx">Office</a></li>
    <li><a id="Market" href="../Market.aspx">Market</a></li>
</ul>

页面导航后，活动类不起作用

2 个答案: