Question

我正在尝试构建一个带有导航菜单的站点，该菜单在将鼠标悬停在当前未“选中”或“活动”的导航按钮上时切换类。这是代码的简单版本：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
ul li a.selected {font-weight:bold;}
ul li a.hover {color:yellow;}
div.page {position:absolute;}
</style>

<script type="text/javascript">
$(function(){
    $("div.page:not(:first)").hide();   // hide all pages except the home page

    var menu=$("div.navMenu ul li a");
    menu.click(function(){
        var previous=window.location.hash;
        var selected=$(this).attr("href");
        if (previous != selected) {
            $("div.page"+previous).fadeOut();
            $("div.page"+selected).fadeIn();
            }
        $(this).addClass("selected");
        menu.not(this).removeClass("selected");
    });

    menu.hover(function(){
        $(this:not(.selected)).toggleClass("hover");
    });

});
</script>
</head>
<body>
<div class="navMenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="page" id="home">This is my home page.</div>
<div class="page" id="portfolio">This is my portfolio page.</div>
<div class="page" id="contact">This is my contact page.</div>
</body>
</html>

Dreamweaver表示

行中存在语法错误

$(this:not(.selected)).toggleClass("hover");

但是，我没有看到语法错误是什么。（我们的想法是仅针对没有“选定”类的菜单按钮切换“悬停”类）。任何帮助将不胜感激。

Answer 1

我认为应该是：

$(this).not(".selected").toggleClass("hover");

Answer 2

可能应该是$(this).not(".selected").toggleClass("hover");左右

Answer 3

$(this:not(.selected)).toggleClass("hover");表达式无效。

使用类似：

menu.hover(function(){
        if ($(this).hasClass('selected'))
            $(this).addClass("hover");
    }, function() {
        if ($(this).hasClass('selected'))
            $(this).removeClass("hover");
    });

jQuery hover（）中的语法错误

3 个答案: