C#网站-在菜单元素中添加一个CSS类

本文关键字：一个 CSS 添加 网站 菜单 元素 | 更新日期: 2023-09-27 17:58:35

我已经使用PHP 7年左右了，但到今天为止，我已经被迫在一个项目中使用.NET。只是为了一个现场：

本项目特点：

.NET4Viewstate=错误

现在我的问题是这个。主布局由母版页覆盖，母版页似乎很安静，很明显它是如何工作的。它还包括导航菜单选项，如：

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

现在我想做的是根据我所在的页面添加一个CSS类属性，所以如果我在产品页面上，我会得到以下来源：

<div id="menu">
    <ul>
        <li><a href="default.aspx" title="Home" >Home</a></li>
        <li><a href="products.aspx" class="active" title="Products">Products</a></li>
        <li><a href="prices.aspx" title="Size &amp; Price">Size &amp; Price</a></li>
        <li><a href="formats.aspx" title="File Formats">File Formats</a></li>
    </ul>
</div>

如有任何帮助，我们将不胜感激！

干杯：）

C#网站-在菜单元素中添加一个CSS类

有很多方法可以做到这一点，其中一种方法是向"slave"页面添加一个脚本，设置相应标记的类。

<li><a href="default.aspx" title="Home" id="aHome" >Home</a></li>
<li><a href="products.aspx" title="Products" id="aProducts">Products</a></li>

然后在products.aspx中，您可以执行以下操作：

<SCRIPT>document.getElementById('aProducts').setAttribute('class', 'active');</SCRIPT>

这不是你问题的答案，但它属于CSS类别，所以我想我至少会评论一下：）

我强烈建议您在每个列表项上设置静态类，并与CSS中的主体类相结合，使用以下内容：

<style type="text/css"><!--
    body.products #menu li.products a,
    body.otherpage1 #menu li.otherpage1 a,
    body.otherpage2 #menu li.otherpage2 a,
    body.otherpage3 #menu li.otherpage3 a,
    body.otherpage4 #menu li.otherpage4 a, { /* your styles here*/ }
--></style>

我认为使用C#来仅仅设置一个类有点过头了，仅此而已：）

我首先将链接转换为服务器控件。有关<asp:HyperLink/>。从那里，我会为我的MasterPage制作一个接口，这样，如果我将来需要更改MasterPage，我就可以实现相同的接口，而不必担心破坏我的构建（我们将在下一步公开一些属性，所以这将很有用）。


public interface IMasterPage
{
    String LnkHomeClass { get; set; }
    String LnkProductsClass { get; set; }
    ...
}

现在，正如我所提到的，在MasterPage的代码后面公开HyperLinks的CssClass属性。


public string LnkProductsClass
{
    get 
    {
        return LnkProducts.CssClass;    
    }
    set
    {
        LnkProducts.CssClass = value;
    }
}

现在您可以在子页面上设置这些。


IMasterPage masterPage = Master as IMasterPage;
if (masterPage != null)
{
    masterPage.LnkProductsClass = “active”;
}

另一种选择，但我不太熟悉，可能是使用嵌套的MasterPages。

相关文章：