Question

我有一个从数据库填充的动态菜单。我在突出显示当前选择的菜单时遇到问题，我使用的是ASP.net C＃。请检查以下代码。

HTML

function highlight(clMenu) {
        clMenu.id = "clMenu";
    }

<form id="Form1" method="post" runat="server">
    <asp:Table ID="tblMenu" runat="server" Width="100%">
    </asp:Table>
</form>

C＃

TableRow rwMenu = new TableRow();
ConnectionCls ConObj = new ConnectionCls();
string StrQuery = "select * from Menus where isenabled=1";
ConObj.GetSqlDataTable(ref Dt, StrQuery);
if (Dt.Rows.Count > 0)
{
  for (i = 0; i <= Dt.Rows.Count - 1; i++)
  {
    string Href = Dt.Rows[i]["url"].ToString();
    clMenu.Text = "<a Href=" + Href + ">" + Dt.Rows[i]["MenuName"] + "</a>";
    clMenu.Attributes.Add("onclick", "highlight(this)");
    rwMenu.Cells.Add(clMenu);
    tblMenu.Rows.Add(rwMenu);
  }
}

除菜单onclick事件外，一切都很完美。当我点击菜单时它的背景颜色我能够成功更改，点击另一个菜单时它的背景颜色也会改变，但之前选择的菜单没有清除

CSS

#clMenu {
    background-color:#EE3D43;
}

Answer 1

我建议使用CSS类附件而不是设置DOM元素id;因为从逻辑上讲，每个DOM元素都必须有唯一的ID。但是可以将单个CSS类分配给许多元素。

所以请看下面的变化：

<强> CSS：

.clMenu {
    background-color:#EE3D43;
}

Javascript代码：

function highlight(domElem) {
    $(".clMenu").removeClass('clMenu'); //removing highlight class from previously clicked  menu
    $(domElem).addClass('clMenu'); //adding highlight class to currently clicked menu
}

Answer 2

如果此类仅用于此锚点，则尝试此操作

function highlight(clMenu){ 
    $(this).attr('id').click(function () {
       $(document).find('.anchorColor').removeClass('anchorColor');
       var aId = $(this).attr('id');
       $(this).addClass('anchorColor');
    });
}

而不是使用id执行带有css的css：

.anchorColor {
    background-color:#EE3D43;
}

突出显示选定的表格单元格C＃Menu

2 个答案: