javascript - 如何获得经典的悬停、主动等。 javascript的行为

Question

我一直遇到这个简单的问题。现在我总是使用相同的解决方案，但我想这不是正确的做法。

情况是这样的:

如果有一个包含 6 个链接和 6 个选项卡的页面。每个链接显示或隐藏带有 javascript 的选项卡(显示: block /无)。我遇到了正常的 html/css 方式不起作用的问题。我可以设置我的 css 使链接悬停，但事件等内容不起作用。现在我使用 6 个独立的函数来操纵每个链接的样式，以便当人们单击链接 5 时，链接 5 带有下划线，而其余的则没有。

我已经尝试使用 .this 和 obj. 重构我的代码，但这仍然没有提供我想要的行为。一旦用js更改css，css似乎就不再起作用了。

我无法想象这是实现正常 html 链接行为的正确方法？

有人有想法吗？你如何解决这个问题？这对我的所有内容都是自动生成的新元素来说是一个真正的问题。

Answer 1

It seems that the css doesn't work anymore once u change the css with js.

这表明(直接或通过某种抽象)您正在使用 JS 更改元素的 .style.* 属性。

这些映射到 style 属性，该属性始终被认为是“最specific”。

解决方案是单独保留样式属性。如果您想更改元素的样式，请在样式表中 预先编写您的 CSS。然后使用JavaScript修改元素的className。

这使您可以更好地控制要应用的样式。

(这只是遵循关于关注点分离的通常规则。开发人员通常在保持 CSS 与 HTML 分离以及 JS 与 HTML 分离方面做得更好，但最常犯的错误是未能将 CSS 分离来自 JS)