根据元素ID更改类值

Question

如果我要解决这个问题，请打我一巴掌，我是个初学者。

这是我的设置，我认为它在外观上与Outlook的UI非常相似。

左窗格（浮动div）包含您可以单击的容器列表（如电子邮件）。 右侧窗格包含一组不可见的容器，当它们的类更改为不同的CSS类时，这些容器将变为可见。

我试图将其设置为在单击左窗格中的元素的位置，然后执行onclick javascript操作（存储在外部.js文件中），该操作在两个CSS类之间切换右div的类值。

左窗格div中的onclick将$ _row ['uniqueID']传递给函数。 那是唯一增加的列名。 它也是右窗格的ID值。

综上所述，有人可以指导我该怎么做吗？

左窗格...

<div onclick=\"toggleMenu('".$row['uniqueIdentifier'],"'); \">

右窗格...

<div id=".$row['uniqueIdentifier']," class=\"mL\">

CSS ...

div.mL {display:none;}
div.mL.active {display:block;}

Answer 1

function toggleMenu(div){
    $('#'+div).addClass('active');
}

jQuery具有.addClass()和.removeClass()方法。

我想这就是您的追求，如果没有，请告诉我。

Answer 2

通过不更改太多代码，我建议这样做：

div.mL {display:none;}
div.mLactive {display:block;}

我删除了圆点，所以您现在有2个不同的班级。 因此，单击时只需将具有正确ID的div的类更改为mLactive。

在Jquery中，可以使用$（＃'theid'）。addClass（'mLactive'）; 这只会添加新类。 您还希望使用$（＃'theid'）。removeClass（'mL'）;删除先前的类。

另一种方式：$（＃'theid'）。attr（“ class”，“ mLactive”）; 不需要删除上一个类。 你的选择。 这种方法的另一个优点是javascript有一种不需要Jquery的方法。

jQuery还有简单的选项$（＃'theid'）。show（）; 和$（＃'theid'）。hide（）btw。