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

Apply css to classes with onclick events

本文关键字：事件 onclick css 应用于      更新时间：2023-09-26

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

作为一个复杂的问题，菜单在ul上附加了一些javascript，用于显示和隐藏嵌套菜单。我不想碰它或干扰它，因为它有效。此外，我不认为它可以解决我的问题，因为它监视所有的菜单li，我不知道如何将一个菜单项的操作与该通用功能联系起来。

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

我的思维过程是偶然的菜单链接到：

<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.menu1、ul.menu2等等，因为没有onclick事件
  2. 我想不出将链接与它是服务器端的目标内容，而不是显式传递它被添加到onclick中的swap_content函数

我对javascript完全陌生，所以这可能完全是愚蠢的，但任何帮助或指导都将不胜感激。如果你想看一看，测试页面就在这里。在该示例中，内容div已经设置为display:none;。

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

首先将div的显示属性和其中的所有内容设置为"inherit.

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

onclick="style.display = 'none'"

这将隐藏该标签中继承display属性的所有内容。

更新：给包含所有要隐藏的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函数。

相关文章：