当前位置：文江博客话题详情

更改导航 id 以突出显示当前页面 ASP.NET 的编程解决方案

发布于 2024-07-07 05:02:40 字数 393 浏览 4 评论 0原文

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

导航是列表式的，CSS 的所以它看起来像一个栏。为了突出显示栏上的页面，列表项需要类似于

。如果可以避免的话，我不想使用。是否有一些代码可以添加到我的每个页面（或只是添加到母版页？）来完成此操作，或者我是否一直使用的代码？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖上的星空 2024-07-14 05:02:41

您是否考虑过使用 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 将有一类“activenav”（或您决定使用的任何内容），其他的将有一类“inactivenav”。你可以相应地编写你的CSS。这是我在我的网站上使用的技术，效果很好。

Have you considered using a Web.sitemap file? It makes it real easy. If your sitemap file looks like this...

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

...then you can do this in your master page to achieve the results you want:

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

The current page's LI will have a class of "activenav" (or whatever you decide to use), and the others will have a class of "inactivenav". You can write your CSS accordingly. This is the technique I use on my site and it works great.

回复收藏 0 原文

静若繁花 2024-07-14 05:02:41

向母版页添加一个名为“页面部分”的属性

public string PageSection { get; set; }

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

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

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

Master.PageSection = "home";

服务器标记

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

在母版页中，将正文标记设置为母版页代码后面，使用该属性在正文标记上设置一个类，

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

为每个导航项提供唯一的 ID 属性。

在您的 CSS 中，根据当前页面类更改导航项的显示

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}

Add a property to your master page called Page Section

public string PageSection { get; set; }

Add a MasterType page directive to the top of your content pages

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

In your content page code behind, set the PageSection property of the master page

Master.PageSection = "home";

In your master page, make the body tag a server tag

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

In the master page code behind, use that property to set a class on the body tag

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

Give each of your nav items a unique ID attribute.

In your css, change the display of the nav items based on the current page class

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}

回复收藏 0 原文

怀念你的温柔 2024-07-14 05:02:41

这是一个更好的语义匹配，并且可能是一个更容易设置的变量，以保持导航在各处使用相同的类或 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);}

It's a better semantic match and likely an easier variable to set to keep the navigation using the same classes or ids everywhere and only alter the body element's id to match:

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

and then on each page...

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

And in the css:

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

回复收藏 0 原文

你的笑 2024-07-14 05:02:41

使用或不使用 ContentPlaceHolder 不会影响哪个元素设置了 id="current"。

在渲染菜单组件时，您必须在母版页的代码隐藏中、JavaScript 函数或其他内容中查看某种方法，以便在创建列表时正确地将 id="current" 添加到列表中。

回复收藏 0 原文

香草可樂 2024-07-14 05:02:41

在母版页代码类中创建受保护的字符串属性怎么样？覆盖 OnLoad:

protected string _bodyId;

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

然后在您的母版页中 aspx:

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

那么您就不必弄乱您的 CSS，如果 CSS 来自设计机构，则特别有用。

How about creating a protected string property in your masterpage code class? Override the OnLoad:

protected string _bodyId;

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

Then in your masterpage aspx:

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

Then you don't have to mess with your CSS, especially useful if the CSS came from a design agency.

回复收藏 0 原文

心在旅行 2024-07-14 05:02:41

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

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

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

:contains 帮助检查 ul->li->a 中所有“a”标签/元素的内容，其父节点标题打印在菜单中...

如果找到，则应用 css 类命名为 navselected 到特定的 ul->li->a 标签/元素。

此致， Minesh Shah

Systems Plus Pvt。有限公司

www.systems-plus.com

Here's how we've achieved it using JQuery by appending the css class to change the background.

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

The ".nav" in ul.nav (in Jquery) is the css class applied to the UL tag.

:contains helps checking the contents of all "a" tag/element within the ul->li->a with ParentNode Title that is printed in Menu...

If found, applies the css class named navselected to the specific ul->li->a tag/element.

Regards, Minesh Shah

Systems Plus Pvt. Ltd.

www.systems-plus.com

回复收藏 0 原文

滥情稳全场 2024-07-14 05:02:41

我会使用 javascript 来完成这个任务。在 css 中，将 #current 更改为类 (.current)，然后在您创建的每个 ListItem 上添加 id。然后使用 RegisterStartupScript 调用一个 javascript 方法来获取适当的 ListItem 并为其分配 current 样式。使用 Prototype，这看起来像 $('MyPageLi').className = 'current'。

回复收藏 0 原文

~没有更多了~