DIV活动状态 - 样式更改 [英] DIV Active state - Style change
问题描述
我创建了04个按钮，并为CSS中的每个按钮定义了活动状态。这些活动状态在JS中调用，因此它在单击时更改div样式属性，然后在单击其他按钮时重置该属性。
I have created 04 buttons and defined the active states for each button in the CSS. These active states are called in JS, so that it changes the div style property on clicked and then resets the property when the other button is clicked.
但这不适合我。
我创建了一个小提琴 DIV标签为此。请帮助。
I have created a fiddleDIV TAG for this. Kindly help.
推荐答案
将您的代码从 onLoad 更改为名为没有换行< head> 。
Change your code from being called onLoad to be called No wrap - in <head>.
因为函数在onLoad函数范围内而不是全局范围，它们不可读，单击按钮时没有调用javascript。
Because the functions were inside the onLoad function scope and not the global scope, they were not readable and no javascript was being called when clicking the buttons.
我没有更改任何代码，只是左窗格中的选项：
jsFiddle
I didn't change any code, just the option on the left pane: jsFiddle
你在逻辑上也有一个小缺陷导致这些类交织在一起。以下是您正在做的事情：
You also had a small flaw in logic causing the classes to become intertwined. Here's what you were doing:
单击第一个对象时，将其类设置为obj1_active。当单击第二个对象时，将obj1的类设置为obj2并将obj2的类设置为obj2_active。
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 ）。
As you can see, we're crossing obj1 and obj2 classes. To solve this, we'll keep track of the last object clicked (role) and the class that it should be when a new object is clicked (cname).
这是演示： jsFiddle
您所使用的代码，但不是很优化。我们不应该只需要四个不同的函数，这些函数对于不同的元素都基本相同。
The code you have works, but it's not very optimized. We shouldn't need four different functions that all do essentially the same thing just to different elements.
在这个演示中，我只需添加和删除单击时，每个元素的className中的_active ： jsFiddle
In this demo, I simply add and remove _active from the className of each element when clicked: jsFiddle
让我们更进一步并使用多个班级。这对于能够概括我们的CSS声明很有用。让我们使用默认类，只将 active 类附加到活动元素上，并在单击新元素时将其删除。
Lets take it a step further and use multiple classes. This is useful to be able to generalize our CSS declarations. Lets use the default classes, and only append the active class onto the active element and remove it when a new element is clicked.
我们还会在classNames中分隔 _ ，这样 btn 就是它自己的类以及任务。这允许我们真正清理我们的CSS代码以提高可读性，并且当我们只需要简单的背景颜色更新或类似的东西时不需要更新多个部分。
We'll also separate the _ in the classNames so that btn is its own class as well as mission. This allows for us to really clean up our CSS code to improve readability as well as not need to update multiple sections when we just need a simple background color update or something of that nature.
以下是优化演示： jsFiddle
我不确定您是否打算这样做，但您会注意到链接有时会变为白色，然后在单击时变为黑色。这是因为：link 伪选择器仅选择未访问的链接。如果您希望它选择所有链接，那么只需使用< a> 标记：最终的jsFiddle
I'm not sure if you meant to do this, but you'll notice that the links sometimes start white then turn to black when clicked. This is because the :link pseudo selector only selects non-visited links. If you want it to select all links, then just use the <a> tag: Final jsFiddle
这篇关于DIV活动状态 - 样式更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
