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

发布于 2024-12-11 21:25:00 字数 2929 浏览 0 评论 0原文

我正在尝试使用 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");

没有在导航栏单击事件时“更新”。关于如何做到这一点有什么想法吗？

原文

I'm trying to make a color fading menu similar to the one on www.guitaracademy.nl using jQuery UI. It almost works, but there is still a bug in it. Here is my example code:

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

The idea is that all navigation buttons except the currently selected/active one "light up" when you hover over them.

The problem is as follows. In the initial state in which the "home" panel is displayed, the highlighting works as desired. However, if I then click on another button (say, "contact") and then hover over the "home" button again, it doesn't "light up". Also, if I hover over the "contact" button it lights up, whereas it's not supposed to since it is currently selected. In short, it seems like my selector

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

is not "updating" upon navbar click events. Any ideas on how I could make it so?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

厌味 2024-12-18 21:25:00

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

可以尝试 - 演示 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");
});

The hover event doesnt seem to bind with the selected menu when initialized.
Hence, it doesnt seem to work with home.

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

回复收藏 0 原文

~没有更多了~