10

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

导航是列表，CSS'd 所以它看起来像一个栏。为了突出显示栏上的页面，列表项需要看起来像这样<li id="current">。<asp:ContentPlaceHolder>如果可以避免，我不想使用它。是否有一些代码可以添加到我的每个页面（或仅添加到母版页？）来完成此操作，还是我坚持使用<asp:ContentPlaceHolder>'s？

4

7 回答 7

13

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

于 2009-01-19T15:40:37.787 回答
10

向母版页添加一个名为 Page Section 的属性

public string PageSection { get; set; }

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

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

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

Master.PageSection = "home";

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

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

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

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

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

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

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}
于 2008-10-09T16:54:20.727 回答
3

这是一个更好的语义匹配，并且可能是一个更容易设置的变量，以保持导航在任何地方使用相同的类或 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);}
于 2008-10-09T20:28:17.847 回答
0

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

您将不得不查看一些方法，无论是在母版页的代码隐藏中、javascript 函数还是在渲染菜单组件时，以便在创建时将 id="current" 正确添加到列表中。

于 2008-10-09T16:48:15.763 回答
0

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

protected string _bodyId;

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

然后在您的母版页 aspx 中：

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

这样您就不必弄乱您的 CSS，如果 CSS 来自设计机构，这尤其有用。

于 2010-02-21T22:11:24.097 回答
0

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

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

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

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

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

问候， Minesh Shah

系统加列兵。有限公司

www.systems-plus.com

于 2013-09-05T10:36:54.453 回答
-2

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

于 2008-10-09T16:49:19.800 回答