Блог

Главная - Вопросы по программированию - Ошибка в меню навигации по цвету пользовательского интерфейса jQuery

Ошибка в меню навигации по цвету пользовательского интерфейса jQuery

#jquery #jquery-ui

#jquery #jquery-ui

Вопрос:

Я пытаюсь сделать меню с исчезновением цвета похожим на то, что на www.guitaracademy .nl с использованием jQuery UI. Это почти работает, но в нем все еще есть ошибка. Вот мой пример кода:

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

Идея заключается в том, что все кнопки навигации, кроме выбранной / активной в данный момент, «загораются» при наведении на них курсора мыши.

Проблема заключается в следующем. В исходном состоянии, в котором отображается панель «home», подсветка работает по желанию. Однако, если я затем нажму на другую кнопку (скажем, «контакт»), а затем снова наведу курсор на кнопку «домой», она не «загорается». Кроме того, если я наведу курсор на кнопку «контакт», она загорается, тогда как она не должна, поскольку она выбрана в данный момент. Короче говоря, это похоже на мой селектор

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

не «обновляется» при щелчках на панели навигации. Есть идеи о том, как я мог бы это сделать?

Ответ №1:

Событие наведения, похоже, не связывается с выбранным меню при инициализации.
Следовательно, похоже, что он не работает с home.

Можно попробовать — Демо 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");
});

Комментарии:

1. Привет, Джейендра, вот и все, спасибо! Теперь я вижу, что условие действительно должно быть помещено внутри hover(), чтобы оно оценивалось при каждом событии наведения, а не только один раз при загрузке страницы. (Я рассматривал возможность использования delegate(), но это тоже работает).

Метки: