0

我在拆分菜单以允许我为菜单的每个按钮提供其自己独特的颜色和悬停颜色时遇到问题。到目前为止，这段代码只允许我设置影响所有菜单选择的通用颜色。如果有人能告诉我要更改/添加到我的代码中的内容，以便为每个选择提供它自己的颜色，我将不胜感激。

我已经使用我正在使用的代码创建了一个到 Jsbin 的链接，因此您可以看到“实时”菜单 - 这可能会更好地让您了解它是如何工作的。这是链接：http: //jsbin.com/ivoqoh/1/edit

同样，我的目标是为每个单独的菜单选项（第 1 页、第 2 页等）提供独特的颜色和悬停颜色。

4

4 回答 4

0

You are affecting all of the menu items because you are using a class as a style. To effect menu items individually you need to assign a unique ID to each element. In your case it would be best to wrap a div around each link and give the divs unique IDs so that you can change styles like the back ground not just the style for the links themselves. In your CSS document you can then stylize each div individually and the style will cascade down into its children (your tags).

Example:

<div id="firstMenuItem"><a href... /></div>

CSS 

#firstMenuItem {
    background-color:#111111;
}

To achieve responding to user events in real time on the web requires the use of JavaScript. Essentially what you want to say in this language is, "when the user mouses over a particular div, change the background color of the menu button."

Since you would like to do the same type of process repetitively with different DOM objects and colors, then you would benefit by writing a function and passing arguments in for the value of the div you would like to change and the color you would like to change it to.

<script type="JavaScript/text">

changeMenuBackground(currentDivID, desiredColor) {

// get the current div element
var div = getElementById(currentDivID);

div.style.backgroundColor = desiredColor;

}
<\script>

There are two moments in the user interaction when the background color of the div needs to change. The first is when the user has the mouseOver the button and the second is when the mouse leaves the button (in us known as mouseOut). To every div that you want to change the background to you would have to change the background to the nw color on mouseOver and on mouseOut.

Example

<div id="firstMenuItem" onmouseover="changeMenuBackground(#firstMenuItem,#333333);" onmouseout="changeMenuBackground(#firstMenuItem,#111111);"><a href="...." /><\div>

There are many different ways to achieve what you want to do, but all of them require the use of JavaScript. This way should do just fine, although you may be able to make it more efficient when tailored to your specific code. Insert the script tags just beneath your CSS styles or CSS sheets but before the body of you page. You must supply the div id preceded by the # symbol and the color you wish to change to for every div in the format i specified above for this function to work.

于 2013-04-23T14:24:05.073 回答
0

You may insert color by just add "color" command in your input or use css to set color.

HTML:

<a href="#slide-panel-1">Page 1</a>
<input type="radio" name="radio-set" id="slide-control-2" color="put your color"/>

or CSS:

.radio-set
{
background-color: "your color";
color: "your color";
}

Hope it help

于 2013-04-23T14:24:29.783 回答
0

您需要全部添加类，然后设置配色方案。

于 2013-04-29T12:53:35.647 回答
0

到目前为止，这里发布的所有答案都给出了答案，而且都是有效的。几乎，如果您希望每个单独的元素都有自己的特殊颜色，您需要为每个元素应用唯一的 ID，然后针对该特定 ID 应用 CSS。

您已经使用锚标记 ( <a>) 定义了菜单项，如下所示：

<a href="#slide-panel-2">Page 2</a>

要专门设置第 2 页的样式，您需要向第 2 页添加一个 ID：

<a href="#slide-panel-1" id="two">Page 2</a>

然后为第 2 页明确应用样式：

#two {
  color: #ffffff;
  background-color: #000000;
}

您需要对每个页面执行相同的操作。在此处查看对您的 JSBin 的更新。

于 2013-04-23T16:39:36.570 回答