Add Current Element's Class To Another Element
I'm trying to get my navigation links to change the css background of another element with jquery.
http://www.flcbranson.org/flcindex-new.php
Quite simply, mouseover li class="joinusonline" and header should become header class="joinusonline". Mouseout and it goes back to header.
JJ
html code:
<!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 code:
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)}
I see you already have this code in your page:
$('.inheader li').hover(
function(){$('header').addClass($(this).attr('class'))},
function(){$('header').removeClass($(this).attr('class'))}
)
I think that code will do what you want, but you're executing it too early before the page is loaded. You need to wrap it in document.ready like this (and I made one small optimization in how you fetch the className):
$(document).ready(function() {
$('.inheader li').hover(
function(){$('header').addClass(this.className)},
function(){$('header').removeClass(this.className)}
)
}
Or, you could also place what you have at the end of your page after the rest of the page has been parsed.
$('li.joinusonline').mouseover(function() {
$('header').addClass('joinusonline');
});
$('li.joinusonline').mouseout(function() {
$('header').removeClass('joinusonline');
});
加载中,请稍侯......
精彩评论