gpt4 book ai didi

javascript - DIV 事件状态 - 样式更改

转载 作者:行者123 更新时间:2023-11-30 18:02:09 24 4
gpt4 key购买 nike

我已经创建了 04 个按钮并在 CSS 中为每个按钮定义了事件状态。这些事件状态在 JS 中被调用,因此它会在单击时更改 div 样式属性,然后在单击另一个按钮时重置该属性。

但这对我不起作用。

我创建了一个 fiddle DIV TAG 为此。请帮忙。

最佳答案

更改您的代码以防止被调用 onLoad被称为No wrap - in <head> .

因为这些函数在 onLoad 函数范围内而不是全局范围内,所以它们不可读,并且在单击按钮时没有调用 javascript。

我没有更改任何代码,只更改了左侧 Pane 中的选项: jsFiddle

更新

您在逻辑上也有一个小缺陷,导致类交织在一起。这是你在做什么:

When first object is clicked, set it's class to obj1_active. When second object is clicked set obj1's class to obj2 and set obj2's class to obj2_active.

如您所见,我们正在交叉 obj1 和 obj2 类。为了解决这个问题,我们将跟踪上次单击的对象 (role) 以及单击新对象时它应该属于的类 (cname)。

这是演示:jsFiddle

优化

您的代码可以工作,但不是很优化。我们不应该需要四个不同的函数,它们基本上都对不同的元素做同样的事情。

在这个演示中,我只是添加和删除了_active。单击时来自每个元素的类名:jsFiddle

让我们更进一步并使用多个类。这对于概括我们的 CSS 声明很有用。让我们使用默认类,只附加 active将类添加到事件元素上,并在单击新元素时将其删除。

我们还将分开 _在 classNames 中,以便 btn是它自己的类以及mission .这使我们能够真正清理我们的 CSS 代码以提高可读性,并且当我们只需要简单的背景颜色更新或类似性质的东西时不需要更新多个部分。

这是优化后的演示:jsFiddle

链接颜色

我不确定您是否打算这样做,但您会注意到链接有时开始时是白色的,然后在单击时变成黑色。这是因为 :link伪选择器只选择未访问过的链接。如果你想让它选择所有链接,那么只需使用 <a>标签:Final jsFiddle

关于javascript - DIV 事件状态 - 样式更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16705956/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com