将 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 会干扰扩展/折叠吗 jquery？我认为开场和闭场取决于观看 ul 的类、ul.menu1、ul.menu2 等，因为没有 onclick 事件。
2. 我想不出一种方法将链接与 它是服务器端的目标内容，而不是显式传递 它到 onclick 中的 swap_content 函数。

我对 javascript 完全陌生，所以这可能完全是愚蠢的，但任何帮助或指导将不胜感激。如果您想查看的话，测试页面位于此处。在示例中，内容 div 已设置为 display:none;。

驱动菜单打开和关闭的代码位于 http://nwi.pdx .edu/jQueryScripts/pubs-search-script.js 但就像我说的，它有效，我真的不想太多地接触它。

Answer 1

首先将 div 的显示属性及其中的所有内容设置为“继承”。

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

onclick="style.display = 'none'"

这将隐藏该标签中的所有内容 您

更新：给包含所有要隐藏 id 的 div 的标签，例如 id =“thing”。

的隐藏函数应该类似于：

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

然后在您想要的项目上。单击以实现添加

onclick="hide()"

更新 需要做的很多事情：您可以使用 JavaScript 的 JQuery 库通过执行以下操作来按类进行选择：

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

其中 myClass 是您的类的名称，hider 是您单击以使其发生的任何内容的类 另外，如果您这样做的话（。还有其他几种方法可以使用类选择器来完成此操作）从隐藏器中删除 onclick 函数。