Question

我正在尝试使用jQuery UI创建类似于www.guitaracademy.nl上的颜色渐变菜单。它几乎可以工作，但它仍然存在一个错误。这是我的示例代码：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<style type="text/css">
#navbar ul {list-style-type:none; margin:0; padding:0;}
#navbar li {float:left;}
#navbar a {width:100px; display:block; color:#7e8fd2; background-color:#001155; text-align:center; padding:4px; text-decoration:none;}
#navbar a.selected {color:white !important;} /*important so as to override inline style generated by jQuery UI*/
div.panel {position:absolute;}
</style>

<script type="text/javascript">
var color_bg = "#001155";
var color_text = "#7e8fd2";
var color_bg_hover = "#384b97";
var color_text_hover = "#9aa7d8";
var color_bg_pressed = color_bg;
var color_text_pressed = "#ffffff";

$(function(){
    $("div.panel:not(:first)").hide();  // hide all panels except the home panel

    var loc=window.location;
    window.location.replace(loc+"#home");   // make window location correspond to home panel

    var menu=$("#navbar a");
    menu.click(function(){
        var previous=window.location.hash;
        var selected=$(this).attr("href");
        if (previous != selected) {
            $("div.panel"+previous).fadeOut();
            $("div.panel"+selected).fadeIn();
            }
        menu.removeClass("selected");
        $(this).addClass("selected");
    });

    var hovermenu=menu.not(".selected");

    hovermenu.hover(function(){
        $(this).stop().animate({ 
            backgroundColor: color_bg_hover,
            color: color_text_hover
        },"fast");
    },function() {
        $(this).stop().animate({ 
            backgroundColor: color_bg,
            color:color_text
        },"slow");
    });

});
</script>
</head>

<body>
<div id="navbar">
<ul>
<li><a href="#home" class="selected">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div style="clear:both"></div>
</div>
<div class="page">
<div class="panel" id="home">This is my home page.</div>
<div class="panel" id="portfolio">This is my portfolio page.</div>
<div class="panel" id="contact">This is my contact page.</div>
</div>
</body>
</html>

当你将鼠标悬停在它们上面时，所有导航按钮除了当前选中/活动的按钮外都会“点亮”。

问题如下。在显示“主页”面板的初始状态下，突出显示按照需要工作。但是，如果我再单击另一个按钮（例如“联系人”），然后再次将鼠标悬停在“主页”按钮上，它就不会“亮起”。此外，如果我将鼠标悬停在“联系人”按钮上，它会亮起，而它不应该因为它当前被选中。简而言之，它似乎是我的选择器

var hovermenu=menu.not(".selected");

导航栏点击事件

未“更新”。关于如何做到这一点的任何想法？

Answer 1

初始化时，悬停事件似乎与选定的菜单无关因此，它似乎与家庭合作。

可以尝试 - 演示http://jsfiddle.net/pwvmk/5/

menu.hover(function(){
    if(!$(this).hasClass('selected')){
        $(this).stop().animate({ 
            backgroundColor: color_bg_hover,
            color: color_text_hover
        },"fast");

    }
},function() {
        $(this).stop().animate({ 
            backgroundColor: color_bg,
            color:color_text
        },"slow");
});

jQuery UI颜色渐变导航菜单中的错误

1 个答案: