繁体   English   中英

使用jquery更改menue的背景颜色

[英]Change Background-color of menue with jquery

我正在尝试用Zenphoto建立一个照片库。 他们使用PHP,可以添加这样的自定义菜单:

    <div id="navmenu">
    <?php printCustomMenu('main_menue'); ?>
    </div>

我改变了sylesheet中整个事物的外观,看起来像这样:

#navmenu {
        width: 1000px;
        height: 42px;
        margin: 0px auto 30px auto;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-align: left;
        font-size: 21px;
        background-color: #000000
        }

#navmenu li {
        display: inline; 
        }

#navmenu a {
        color: #eee;
        display: inline;
        line-height: 2em;
        padding: 0.375em 0.5em;
        text-decoration: none;
            }

#navmenu a:hover {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 21px;
        color: #000000;
        background-color: #ffff33;
        padding: 0.375em 0.5em;
            }

现在我想更改各个菜单项的背景颜色,以便每个菜单项都有自己的颜色。 随机与否我不在乎。 我创建了一个正确连接的js文件。

我已经尝试了几个代码,但没有任何作用。 现在我试着这样做,看看我是否可以改变颜色:

 $(document).ready(function() {

 $("navmenu").hover(function(){
  $(this).css('background-color', '#eeeeee')
 });
});

不行。 我是所有这些编程的新手,我将非常感谢任何帮助。 如果你能回答傻瓜,那将是非常好的,这样我才能理解。

使用:

$("#navmenu").hover(function(){

你错过了ID #选择器。

您需要使用#为ID或a正确地处理div。 对于一个类:

$(document).ready(function() {

$("#navmenu").hover(function(){
  $(this).css('background-color', '#eeeeee')
 });
});

初学者的提示:如果你没有得到你期望的结果,你可以通过在这样的地方抛出控制台日志消息来验证是否正在调用该函数:

$(document).ready(function() {
    console.log("document ready!");
    $("#navmenu").hover(function(){
        console.log("hover activated");
        $(this).css('background-color', '#eeeeee')
    });
});

你可以尝试这样的东西,因为它会在hover时选择一个random color并切换回hover out事件的#EEE背景:

jQuery的:

$(function () {
    $("#navmenu a").hover(function () {
        var newColor = Math.floor(Math.random() * 16777215).toString(16);
        $(this).css('background-color', '#' + newColor);
    }, function () {
        $(this).css('background-color', '#EEE')        
    });
});​

工作示例: http//jsfiddle.net/Qc4R7/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM