程序化解决方案，用于更改导航ID以突出显示当前页面ASP.NET

StackOverflow https://stackoverflow.com/questions/188124

  •  06-07-2019
  •  | 
  •  

题

我正在使用Visual Studio 2008和ASP.NET 3.5编写一个网站。我设置了一个母版页来简化布局并保留内容页面而不是内容和布局。

导航是列表，css，所以它看起来像一个栏。为了突出显示栏上的页面，列表项需要如下所示<li id="current">。如果可以避免，我不想使用<asp:ContentPlaceHolder>。是否有一些代码可以添加到我的每个页面（或者只是添加到母版页？）来实现这个目标，还是我不能使用<=>了？

有帮助吗？

解决方案

将属性添加到名为Page Section

的母版页 
public string PageSection { get; set; }

将MasterType页面指令添加到内容页面的顶部

<%@ MasterType VirtualPath="~/foo.master" %>

在您的内容页面代码中，设置母版页的PageSection属性

Master.PageSection = "home";

在您的母版页中，将正文标记设为服务器标记

<body ID="bodyTag" runat="server">

在后面的母版页代码中，使用该属性在body标签上设置类

bodyTag.Attributes.Add("class", this.PageSection);

为每个导航项目指定唯一的ID属性。

在您的css中，根据当前页面类

更改导航项的显示 
.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}

其他提示

您是否考虑过使用Web.sitemap文件？这真的很容易。如果您的站点地图文件看起来像这样...... 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="~/Default.aspx" title="Home"  description="" />
    <siteMapNode url="~/Blog.aspx" title="Blog"  description="" />
    <siteMapNode url="~/AboutUs.aspx" title="AboutUs"  description="" />
  </siteMapNode>
</siteMap>

...然后您可以在母版页中执行此操作以获得所需的结果：

<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false"  />
<ul id="navigation">
    <asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
        <ItemTemplate>
            <li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

当前页面的LI将有一个<！> quot; activenav <！>的类; （或者你决定使用的任何东西），其他人将有一个<！>“; inactivenav <！>”的类。你可以相应地编写你的CSS。这是我在我的网站上使用的技术，效果很好。

这是一个更好的语义匹配，可能是一个更容易设置的变量，用于保持导航使用相同的类或ID到处，只改变body元素的id来匹配：

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

然后在每个页面上...... 

<body id="home">
<body id="blog">

在css中：

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}

使用或不使用ContentPlaceHolder不会影响哪个元素具有id = <！> quot; current <！> quot;就此而言。

在渲染菜单组件以正确添加id = <！> quot; current <！>时，您必须在主页的代码隐藏，javascript函数或其他方法中查看某些方法。创建时列表。

如何在母版页代码类中创建受保护的字符串属性？覆盖OnLoad：

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

然后在你的母版页面aspx：

<body id="<%= _bodyId %>">

然后你不必乱用你的CSS，特别是如果CSS来自设计机构时很有用。

以下是我们如何使用JQuery通过附加css类来改变背景来实现它。

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

<！>“; .nav <！>”; in ul.nav（在Jquery中）是应用于UL标记的css类。

:contains有助于检查所有<！>“a <！>”的内容。 ul中的标签/元素 - <！> gt; li - <！> gt; a带有在菜单中打印的ParentNode标题...

如果找到，请将名为navselected的css类应用于特定的ul - <！> gt; li - <！> gt;标记/元素。

此致，Minesh Shah

Systems Plus Pvt。有限公司

www.systems-plus.com

我会用javascript来完成这个。在css中，将#current更改为类（.current），然后在您创建的每个ListItem上都有id。然后使用RegisterStartupScript调用一个获取相应ListItem的javascript方法，并为其指定一种当前样式。使用Prototype，这看起来像$（'MyPageLi'）。className ='current'。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top