Question

我有一个用ASP.NET和C＃后端编写的网站。我正在尝试为导航栏创建一个指示器，这样当您进入某个页面时，当前页面的链接将突出显示。我尝试了不同的方法，但没有一个对我有效。

这是我的HTML：

<div class="nav sidebar">
<ul id="navmenu" class="navmenu" runat="server">
<li id="link1"><a id="linkone" onserverclick="linkone_onclick" runat="server"><h2>Link 1</h2></a></li>
<li id="link2"><a id="linktwo" onserverclick="linktwo_onclick" runat="server"><h2>Link 2</h2></a></li>
</ul>
</div>

jQuery：这改变了颜色，但是一旦页面加载到我点击的链接，颜色就被删除了，所以这不起作用：

$function(){
$('#navmenu li').click(function(){
$('#navmenu li').removeClass();
$(this).toggleClass('active');
});
});

CSS中的active课程：

.navmenu ul li:hover{background-color:yellow;}
#navmenu ul li:active{background-color:yellow;} //Trying to highlight the entire `<li>` element.

我也试过这个JS片段，以便在页面重新加载时颜色可以保留，但同样，这不起作用：

<script type="text/javascript">
 $(function() {
        var url = window.location.href;

        $("#navmenu a").each(function() {
            if (url == (this.href)) {
                $(this).closest("li").addClass("active");
            }
        });
    });   
</script>

最后，我尝试了一种方法，每次页面加载到新页面时我都会更改<body>标记的id，然后使用CSS更改样式，但这不起作用。当我使用开发人员工具检查<body>代码时，ID始终为空：<body id="">

C＃：

public partial class MyClass:System.Web.UI.MasterPage{

public string bodyId; //Also tried public string bodyId{get; set;}

protected void Page_Load(Object s, EventArgs e){}

protected void linkone_onclick(Object s, EventArgs e){

Response.redirect("pageone.aspx");
bodyId="linkoneid";

}

protected void linktwo_onclick(Object s, EventArgs e){

Response.redirect("pagetwo.aspx");
bodyId="linktwoid";

}

在我的.NET中：

<body id="<%=bodyId%>">

当我在当前页面上时，如何获取要突出显示的链接？在这一点上，我将采用任何可行的解决方案（jQuery，C＃，纯JavaScript，CSS）。我很感激任何帮助。

Answer 1

您可以尝试这样的事情：

        <div class="nav sidebar">
        <ul id="navmenu" class="navmenu" runat="server">
            <li runat="server" id="Home"><a id="Homelink" href="default.aspx">
                <h2>Home</h2>
            </a></li>
            <li runat="server" id="link1"><a id="linkone" href="linkone.aspx">
                <h2>Link 1</h2>
            </a></li>
            <li runat="server" id="link2"><a id="linktwo" href="linktwo.aspx">
                <h2>Link 2</h2>
            </a></li>
        </ul>
    </div>

然后在您的母版页加载方法中：

        string TargetPage = Page.AppRelativeVirtualPath;
        if (TargetPage.ToLower().Contains("one"))
        {
            link1.Attributes.Add("style", "background: red;");
        }
        else if (TargetPage.ToLower().Contains("two"))
        {
            link2.Attributes.Add("style", "background: blue;");
        }
        else
        {
            link1.Attributes.Add("style", "background: white;");
            link2.Attributes.Add("style", "background: white;");
        }

声明：这个机制有点粗糙，但听起来你正在寻找立即的回报，它确实实现了这一目标。

您还可以采用此处表达的基本概念并将其移至jquery解决方案。 IE：根据风格找到链接，获取当前位置名称，然后添加“活跃”链接。样式基于与当前位置同名的链接。

JQuery选项：

    <form id="form1" runat="server">
    <div class="nav sidebar">
        <ul id="navmenu" class="navmenu" runat="server">
            <li runat="server" id="Home"><a id="Homelink" href="default.aspx">
                <h2>Home</h2>
            </a></li>
            <li id="linkonepage"><a id="link1" href="linkonepage.aspx">
                <h2>Link 1</h2>
            </a></li>
            <li id="linktwopage"><a id="link2" href="linktwopage.aspx">
                <h2>Link 2</h2>
            </a></li>
        </ul>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>
<script type="text/javascript">
    $().ready(function () {
        var href = document.location.href;
        var lastPathSegment = href.substr(href.lastIndexOf('/') + 1).replace('.aspx', '').toLowerCase();
        var v = $('#' + lastPathSegment);
        if (v.length) {
            v.attr('style', 'background: red;');
        }
    });
</script>

Answer 2

由于您将bodyId设置为link id + "id"，因此您可以执行以下操作。

$(function() {
    var linkid = $('body').attr('id').slice(0, -2);
    $('#'+linkid).closest("li").addClass("active");        
});

希望它有所帮助。

在当前页面上突出显示导航栏中的链接

2 个答案: