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

Question

I have a site written in ASP.NET and C# backend. 我有一个用ASP.NET和C＃后端编写的网站。 I'm trying to create an indicator for my navigation bar, so that when you're on a certain page, the link for the current page will be highlighted. 我正在尝试为我的导航栏创建一个指示器，以便当您在特定页面上时，当前页面的链接将突出显示。 I've tried different approaches but none have worked for me. 我尝试了不同的方法，但没有一个对我有用。

This is my HTML: 这是我的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>

The jQuery: This changed the color but as soon as the page loaded to the link I clicked on, the color was removed, so this did not work: jQuery：这改变了颜色，但是一旦页面加载到我单击的链接上，颜色就被删除了，所以这不起作用：

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

My active class in the CSS: 我在CSS中的active课程：

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

I also tried with this JS snippet so that the color could stay when the page reloads, but again, this did not work: 我还尝试了使用此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>

And finally, I tried the approach where I would change the id of the <body> tag each time the page loads to a new page, and then change the style with the CSS, but this did not work. 最后，我尝试了一种方法，该方法是在每次页面加载到新页面时更改<body>标记的ID，然后使用CSS更改样式，但这没有用。 When I used the developer tools to inspect the <body> tag, the id would always be blank: <body id=""> 当我使用开发人员工具检查<body>标记时，该ID始终为空白： <body id="">

C#: 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";

}

And in my .NET: 在我的.NET中：

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

How can I get the link to highlight when I'm on the current page? 在当前页面上时，如何使链接突出显示？ At this point I'll take any solution that will work (jQuery, C#, pure JavaScript, CSS). 在这一点上，我将采用任何可行的解决方案（jQuery，C＃，纯JavaScript，CSS）。 I would appreciate any help with this. 我将不胜感激。

Answer 1

You could try something like this: 您可以尝试这样的事情：

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

And then in your master page load method: 然后在您的母版页加载方法中：

        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;");
        }

Disclaimer: This mechanism a bit crude, but it sounds like you are looking for an immediate pay-off and it does achieve that. 免责声明：这种机制有点粗糙，但是听起来您正在寻找立即的回报，并且确实可以实现这一目标。

You could also take the basic concept expressed here and move it to a jquery solution. 您也可以采用此处表达的基本概念，并将其移至jquery解决方案。 IE: find the links based on, say style, get the current location name, and add the 'active' style based the link that has the same name as the current location. IE：根据样式说出链接，获取当前位置名称，然后根据与当前位置具有相同名称的链接添加“活动”样式。

JQuery option: 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

Since you are setting bodyId as the link id + "id" then you can do it like following. 由于您将bodyId设置为link id + "id"因此可以按照以下步骤进行操作。

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

Hope it helps. 希望能帮助到你。

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-11-29 15:43:15

解决方案2
0 2015-11-29 16:14:06

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-11-29 15:43:15

解决方案2 0 2015-11-29 16:14:06

解决方案1
0 已采纳 2015-11-29 15:43:15

解决方案2
0 2015-11-29 16:14:06