javascript - 将 css 应用于具有 onclick 事件的类

Question

我的页面左侧有一个由嵌套 ul 组成的菜单。在我的页面右侧，我有一系列内容 div，它们都有一个对应于左侧菜单链接的类。当您单击左侧的菜单链接时，它需要隐藏我所有的内容 div，然后仅显示具有相应类的内容。因此，如果您单击“实现/系统开发”链接，该页面将首先隐藏类“content”的所有 div，然后显示类“content5”的所有 div。

作为此菜单的一个并发症，该菜单有一些附加到显示和隐藏嵌套菜单的 ul 的 javascript。我不想碰它或干扰它，因为它有效。此外，我认为它无法解决我的问题，因为它会监视所有菜单项，而且我不知道如何将一个菜单项操作与该一般功能联系起来。

我想我需要的是添加一个 onclick 事件，将我所有内容 div 的显示设置为无，并将一个子集设置为阻止。菜单是在服务器端生成的，因此我可以为其添加属性。

我的思考过程是菜单链接到的机会:

<a href="#" onclick="swap_content(content5)">Implementation/System development</a>

然后有更改 css 的代码，例如:

swap_content([target]){
    div.content{ display:none;}
    div.[target]{ display:block;}
}

这样它会隐藏所有当前显示的内容，然后只显示与该链接关联的内容。

<div class='content content26 content27 content28 content29 content30'></div>

1. 使用 onclick 是否会干扰从 查询？我认为开闭靠看 ul 的类，ul.menu1，ul.menu2 等等，因为没有 点击事件。
2. 我想不出一种方法将链接关联到 它是服务器端的目标内容，而不是显式传递 它到 onclick 中的 swap_content 函数。

我是 javascript 的新手，所以这可能完全是愚蠢的，但如果有任何帮助或指导，我将不胜感激。测试页上来here如果你想看一看。在示例中，内容 div 已设置为 display:none;。

驱动菜单打开和关闭的代码在http://nwi.pdx.edu/jQueryScripts/pubs-search-script.js但正如我所说，它有效，我真的不想那么多碰它。

Answer 1

首先将div的显示属性和里面的所有内容设置为“继承”。

将它们全部放入一个容器中，例如 span 或 div 标签，然后在该 span 或 div 中添加以下代码:

onclick="style.display = 'none'"

这将隐藏该标签中从其继承显示属性的所有内容。

更新:为包含所有要隐藏的 div 的标签提供一个 id，例如 id = "thing"。

您的隐藏函数应该类似于:

function hide ()
 {
  document.getElementById("thing").style.display = "none";
 }

然后在您要单击的元素上的 html 中添加

onclick="hide()"

更新 Numerou Dos:您可以使用 JavaScript 的 JQuery 库按类进行选择，方法如下:

$(."hider").click(function(){$(".myClass").css("display","none");});

其中 myClass 是您的类的名称，而 hider 是您单击以实现它的类。此外，如果您这样做(还有其他几种使用类选择器的方法)，请从隐藏器中删除 onclick 函数。