Question

我正在尝试创建一个导航区域，并尝试使用活动变量切换标签。这只是导航按钮，但后来我想通过切换变量来制作一个旋转器。

这是我的代码：

                active = 1;

        function hover() {


            $(nav1).live('mouseenter', function() {
                active = 2;
            });

            if ( active == 1) {
            $(tab1).fadeIn('fast');
            }
            else if ( active != 1) {
                $(tab1).fadeOut('slow');
            } 

            if ( active == 2) {
                $(tab2).fadeIn('fast');
            }
            else if ( active != 2) {
                $(tab2).fadeOut('slow');
            } 

        }


        hover();

Answer 1

您的标签选择“if（active == 1）{...”仅在开头调用。你需要再次调用这个开关循环。

由于你的问题，如果活跃等于2 - 显然它没有。你的意思是

$(nav1).live('hover', function() {
   active += 1;
});

每次悬停$（nav1）时，此值都会增加。顺便说一句：你的意思是$（'nav1'）？

Answer 2

你应该试试

active = 1;
function showTab() {
    if ( active == 1) {
        $(tab1).fadeIn('fast');
    }
    else if ( active != 1) {
        $(tab1).fadeOut('slow');
    } 

    if ( active == 2) {
        $(tab2).fadeIn('fast');
    }
    else if ( active != 2) {
        $(tab2).fadeOut('slow');
    }
}

$(nav1).live('hover', function() {
    active = 1;
    showTab();
});

$(nav2).live('hover', function() {
    active = 2;
    showTab();
});

请注意，此代码需要四个变量tab1，tab2，nav1和nav2。

Answer 3

如果我理解你要做什么，那么你可能会考虑将'active'变量设置为实际的菜单项而不是数字。此外，您可能错误地使用了jQuery .live（），此外，jQuery .delegate（）在这种情况下可能更有用，具体取决于您的标记。（有关这些方法的信息，请参阅jquery.com）

<html>
<head>
<script type="text/javascript">

// the active nav item:
var active;

// set up the hover events on each nav item only after the DOM is ready:
$(document).ready(function() {

    $('.nav li').hover(function() {

        // set the active nav item:
        active = $(this);

        // show the active nav item in the UI as test
        alert(this.id);
    });

});

</script>
</head>
<body>

<ul class="nav">
    <li id="nav1">nav 1</li>
    <li id="nav2">nav 1</li>
</ul>

</body>
</html>

不能改变变量

3 个答案: