jQuery UI颜色褪色导航菜单中的错误_Jquery_Jquery Ui

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

jquery jquery-ui

jQuery UI颜色褪色导航菜单中的错误,jquery,jquery-ui,Jquery,Jquery Ui,我正在尝试使用jQueryUI制作一个类似于www.guitaracademy.nl上的褪色菜单。它几乎可以工作，但仍然有一个bug。下面是我的示例代码： <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/

我正在尝试使用jQueryUI制作一个类似于www.guitaracademy.nl上的褪色菜单。它几乎可以工作，但仍然有一个bug。下面是我的示例代码：

<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>

未在导航栏单击事件时“更新”。有什么想法吗？

在初始化时，悬停事件似乎不会与所选菜单绑定。
因此，它似乎不适用于家庭

你可以试一试-演示

嗨，贾扬德拉，就是这样，谢谢！我现在看到，该条件确实应该放在hover（）中，以便在每次悬停事件中对其求值，而不是在页面加载时仅对其求值一次。（我正在考虑使用delegate（），但这也行得通）。

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

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");
});