简体繁体 English

DIV活动状态-样式更改

[英]DIV Active state - Style change

原文 2013-05-23 05:00:18 5 1 javascript/ html5

I have created 04 buttons and defined the active states for each button in the CSS. 我创建了04个按钮，并定义了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. 这些活动状态在JS中被调用，因此它会在单击时更改div样式属性，然后在单击另一个按钮时重置该属性。

But this is not working for me. 但这对我不起作用。

I have created a fiddle DIV TAG for this. 我为此创建了一个小提琴 DIV TAG 。 Kindly help. 请帮助。

1 个解决方案

Change your code from being called onLoad to be called No wrap - in <head> . 将代码从调用onLoad更改为No wrap - in <head> 。

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. 由于这些函数位于onLoad函数范围内而不是全局范围内，因此它们不可读，并且在单击按钮时未调用任何javascript。

I didn't change any code, just the option on the left pane: jsFiddle 我没有更改任何代码，仅更改了左窗格中的选项： jsFiddle

Update 更新

You also had a small flaw in logic causing the classes to become intertwined. 您在逻辑上也有一个小缺陷，导致类相互缠绕。 Here's what you were doing: 这是您正在做的事情：

When first object is clicked, set it's class to obj1_active. 单击第一个对象时，将其类设置为obj1_active。 When second object is clicked set obj1's class to obj2 and set obj2's class to obj2_active. 单击第二个对象时，将obj1的类设置为obj2，并将obj2的类设置为obj2_active。

As you can see, we're crossing obj1 and obj2 classes. 如您所见，我们正在跨越obj1和obj2类。 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 ). 为了解决这个问题，我们将跟踪单击的最后一个对象（ role ）以及单击新对象时应包含的类（ cname ）。

Here is the Demo: jsFiddle 这是演示： jsFiddle

Optimization 优化

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. 我们不需要四个不同的函数，它们对不同的元素都执行本质上相同的事情。

In this demo, I simply add and remove _active from the className of each element when clicked: jsFiddle 在此演示中，我仅在单击时从每个元素的className中添加和删除_active ： jsFiddle

Lets take it a step further and use multiple classes. 让我们更进一步，并使用多个类。 This is useful to be able to generalize our CSS declarations. 这对于能够概括我们的CSS声明很有用。 Lets use the default classes, and only append the active class onto the active element and remove it when a new element is clicked. 让我们使用默认类，仅将active类附加到活动元素上，并在单击新元素时将其删除。

We'll also separate the _ in the classNames so that btn is its own class as well as mission . 我们还将在classNames中将_分开，以便btn是它自己的类以及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. 这使我们能够真正清理CSS代码以提高可读性，并且仅在需要简单的背景颜色更新或类似性质的情况下不需要更新多个部分。

Here is the optimized demo: jsFiddle 这是优化的演示： jsFiddle

Link Color 链接颜色

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. 这是因为:link伪选择器仅选择未访问的链接。 If you want it to select all links, then just use the <a> tag: Final jsFiddle 如果希望它选择所有链接，则只需使用<a>标签： Final jsFiddle