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

本文关键字：导航 链接 显示 当前页 | 更新日期: 2023-09-27 18:24:54

我有一个用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）。如果有任何帮助，我将不胜感激。

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

你可以试试这样的东西：

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

由于您将bodyId设置为link id + "id"，因此可以按照以下方式进行操作。

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

希望能有所帮助。

相关文章：