Question

我正在编辑一个菜单使用JavaScript的网站。我设法让它工作，但悬停状态只是显示在错误的位置。

Here is the link.如果您点击“图库”，则会在最后3个菜单项上突出显示媒体。请帮助。

以下是JavaScript代码：

$(document).ready(function(){
$('#menu .container').each(function(i){
    if(i==0)
    {
        var m = 1;  
    }
    else
    {
        var m = 2;
    }
    $(this).css('width',((m-1)*$(this).parent('li').height() + $(this).parent('li').width())).css('height',$(this).parent('li').height()).css('margin-left',-(m-1)*$(this).parent('li').height()).css('cursor','pointer');

    if(cur_page!=i)
    {
        $(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top',$(this).parent('li').height()).css('left',-/*m**/($(this).parent('li').height()));
    }
    else
    {
        $(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top','0px').css('left','0px');
    }

    $(this).find('.text').html('<img src="' + tpl_base + '/images/menu-title-' + (i+1) + '.png" />').css('margin-left',(m-1)*$(this).parent('li').height());

    switch(i)
    {
        case 0: var a = url_base + '/bio';
            break;
        case 1: var a = url_base + '/blog';
            break;
        case 2: var a = url_base + '/gallery';
            break;
        case 3: var a = url_base + '/media';
            break;
        case 4: var a = url_base + '/contact';
            break;
        default: var a = url_base;
    }

    $(this).click(function(){
        window.location = a;                       
    });


    var t = $(this).parent('li').height();
    if(cur_page!=i)
    {
        $(this).hover(function(){
            $(this).find('.slide').stop().animate({top:'0px',left:/*-(t*(m-1))*/0 + 'px'}, 200)                    
        },function(){
            $(this).find('.slide').stop().animate({top:t + 'px',left:-(t/**m*/) + 'px'}, 400)                      
        });
    }
});
});

Answer 1

菜单项的突出显示似乎是基于变量cur_page完成的，该变量在代码中的某个点被错误地设置;这是现在的价值观点：

Home : cur_page = -1
Bio : cur_page = 0
Blog : cur_page = 1
Gallery : cur_page = 3 // Incorrect
Media : cur_page = 4 // Incorrect

我会检查这是否正确设置;祝你好运！

编辑：

在“图库”页面的标题中是：

<script> 
    var url_base = "http://www.ryansemple.com";
    var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
    var cur_page = -1;
    cur_page = 3;
</script>

将其更改为：

<script> 
    var url_base = "http://www.ryansemple.com";
    var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
    var cur_page = 2;
</script>

类似的修复应该处理剩余的页面。

Answer 2

什么是cur_page？我假设它是当前页面索引，你在计算上有所不同。可能你的索引从0开始，但cur_page从1开始。

错误按钮中的活动状态

2 个答案: