Question

我正在尝试使用jquery来改变导航链接以更改另一个元素的css背景。

http://www.flcbranson.org/flcindex-new.php

很简单，mouseover li class =“joinusonline”，标题应该变成header class =“joinusonline”。鼠标输出，它会回到标题。

JJ

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Faith Life Church - Branson, MO</title>
    <script src="include/jquery-1.6.4.min.js"></script>
    <script>
    // changes <header> background when mouseover <ul class="inheader"><li>
    $('.inheader li').hover(
        function(){$('header').addClass($(this).attr('class'))},
        function(){$('header').removeClass($(this).attr('class'))}
    )
    </script>
</head>
<body role="document">
<header role="banner">
    <h1><a href="http://www.flcbranson.org">Faith Life Church</a></h1>
</header>
<nav role="navigation">
    <h2>Main site navigation</h2>
    <ul class="inheader">
        <li class="joinusonline"><a href="flconlineservices.php">Join Us On-Line</a></li>
        <li class="areainformation"><a href="flcareainfo.php">Area Information</a></li>
        <li class="flcevents"><a href="flcevents.php"><abbr title="Faith Life Church">FLC</abbr> Events</a></li>
    </ul>
</nav>
<section id="content" role="main">
    <h1 id="title">Welcome</h1>
</section>
</body>
</html>

css代码：

header {background:#003366 url() no-repeat center top;}
header.joinusonline {background-image:url(../images/backgrounds/header-joinusonline.jpg)}
header.areainformation {background-image:url(../images/backgrounds/header-areainformation.jpg)}
header.flcevents {background-image:url(../images/backgrounds/header-flcevents.jpg)}

Answer 1

我发现您的页面中已有此代码：

$('.inheader li').hover(
    function(){$('header').addClass($(this).attr('class'))},
    function(){$('header').removeClass($(this).attr('class'))}
)

我认为代码会做你想要的，但你在加载页面之前就过早地执行它。你需要将它包装在这样的document.ready中（我对你如何获取className做了一个小的优化）：

$(document).ready(function() {
    $('.inheader li').hover(
        function(){$('header').addClass(this.className)},
        function(){$('header').removeClass(this.className)}
    )
}

或者，您也可以在解析完其余页面后，将所拥有的内容放在页面的末尾。

Answer 2

$('li.joinusonline').mouseover(function() {
   $('header').addClass('joinusonline');
});

$('li.joinusonline').mouseout(function() {
   $('header').removeClass('joinusonline');
});

将当前元素的类添加到另一个元素

2 个答案: