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

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尝试用class：

.anchorColor {
    background-color:#EE3D43;
}