0

如果我做错了就打我一巴掌，我是初学者。

这是我的设置，我猜这在视觉上与 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;}
4

2 回答 2

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

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

我想这就是你所追求的，如果不是，请告诉我。

于 2012-05-14T21:44:55.390 回答
1

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

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() 顺便说一句。

于 2012-05-14T21:50:57.173 回答