c# - 更改事件选项卡(导航菜单)的 CSS

Question

我想更改我网站上事件标签的样式。

我当前的代码是:

    string pageName = this.ContentPlaceHolder1.Page.GetType().FullName;

    string active1 = "";
    string active2 = "";
    string active3 = "";
    string active4 = "";


    if (pageName == "ASP.default_aspx")
    {
        active1 = "test1";
    }

    else if (pageName == "ASP.kalender_aspx")
    {
        active2 = "test1";
    }

    else if (pageName == "ASP.organisation_aspx")
    {
        active3 = "test1";
    }

    else if (pageName == "ASP.kontakt_aspx")
    {
        active4 = "test1";
    }

    litNav.Text += "<ul class='menusm'>";
    litNav.Text += "<li class='" + active1 + "'><a href='default.aspx'>Nyheder</a></li>";
    litNav.Text += "<li><a class='" + active2 + "'" + "href='kalender.aspx'>Kalender</a></li>";
    litNav.Text += "<li><a class='" + active3 + "' href='#'>Organisation</a></li>";
    litNav.Text += "<li><a class='" + active4 + "' href= '#'>Kontakt</a></li>";
    litNav.Text += "</ul>";

当我将字符串“active1”放入 li 标签中时，它会更改事件选项卡上的颜色

但是当我尝试将我的字符串 (active2) 放入“a”标签而不是“li”时

它没有响应。

我的 CSS

.topnav ul li.current_page_item a {
                    color: #fff;
                    background: #f00 url(../images/menu_a.gif) repeat-x left top;
                    border-left: 1px solid #1d589c;
                    border-top: 1px solid #1d589c;
                    border-right: 1px solid #fff;
                    border-bottom: 1px solid #fff;
                }

我刚刚制作了“Test1”用于测试。但是我想使用的类是 .topnav ul li.current_page_item a

Answer 1

理想情况下，您走在正确的轨道上，但您需要将其 Javascript 实现模拟到您的元素中，以便在 HTML 中的元素中添加/删除类。

I threw together a quick example here of this in this JS Bin.

从本质上讲，您希望将不同的类分配给与您的样式表关联的 HTML 属性。在我的例子中，我这样设置我的代码:

HTML:

<button id="testButton" class="unclicked">Button</button>

CSS:

.unclicked {
   background-color: red;
}

.clicked {
   background-color: green;
}

现在您的参数已经设置好，只需设置重新分配类的逻辑即可。 **请务必在样式中明确定义新类的属性，以便正确解释您的更改。