Question

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

作为一个复杂的功能，菜单上附有一些附加到ul的javascript，用于显示和隐藏嵌套的菜单。我不想触摸它或干扰它，因为它有效。另外我认为它不可用于解决我的问题，因为它会监视所有菜单li并且我不知道如何将一个菜单项动作与该常规功能联系起来。

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

我的思维过程很可能是菜单链接到：

<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>

使用onclick会干扰扩展/折叠 jQuery的？我认为开幕和闭幕都依赖于观看 ul的类，ul.menu1，ul.menu2等等，因为没有 onclick事件。
我想不出将链接与之关联的方法除了显式传递之外，它是服务器端的目标内容它是onclick中的swap_content函数。

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

驱动菜单打开和关闭的代码是http://nwi.pdx.edu/jQueryScripts/pubs-search-script.js，但就像我说的那样，它有效，我真的不想触及它。

Answer 1

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

从那里把它们全部放在一个容器中，例如span或div标签，然后在该span或div中添加以下代码：

onclick="style.display = 'none'"

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

更新：提供包含您要隐藏ID的所有div的标记，例如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是您点击以实现它的任何类。另外，如果你这样做（还有其他一些方法可以使用类选择器）从你的hider中删除onclick函数。

使用onclick事件将css应用于类

1 个答案: