2
我使用菜单栏从本教程：http://css-tricks.com/learning-jquery-fading-menu-replacing-content/页面内容没有出现
当我换成我自己的内容，它不会加载它。我正在放入一个带有图像的滑块，当我点击其中一个按钮时，出于某种原因它将不会加载它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Fader from CSS-Tricks</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<!--CONTENT SLIDER-->
<link rel="stylesheet" href="../css/basic-jquery-slider.css">
<script src="../js/jquery-1.6.2.min.js"></script>
<script src="../js/basic-jquery-slider.js"></script>
<script type="text/javascript">
$(function(){
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 100);
// each button div MUST have a "xx-button" and the target div must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it out
$("#content").find("div:visible").fadeOut(1, function(){
//once the fade out is completed, we start to fade in the right div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 100);
});
});
</script>
<style>
.container {
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background-image:url(../images/screen.png);
}
</style>
</head>
<body>
<div class="container">
<div id="page-wrap">
<div id="menu">
<img src="../../Website/images/logo.png" />
<div id="home-button" class="button">
<img src="../images/menu-home.png" alt="home" class="button" />
</div>
<div id="about-button" class="button">
<img src="../images/menu-about.png" alt="about" class="button">
</div>
<div id="contact-button" class="button">
<img src="../images/menu-contact.png" alt="contact" class="button">
</div>
<div id="gallery-button" class="button">
<img src="../images/menu-gallery.png" alt="gallery" class="button">
</div>
<div id="affiliates-button" class="button">
<img src="../images/menu-affiliates.png" alt="affiliates" class="button">
</div>
<div id="bio-button" class="button">
<img src="../images/menu-bio.png" alt="bio" class="button">
</div>
</div>
<div class="clear"></div>
<div id="content">
<div id="home">
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="../images/banner02.jpg" title="Cool Skull"></li>
<li><img src="../images/banner04.jpg" title="Women1"></li>
<li><img src="../images/banner01.jpg" title="Kid With Shell"></li>
<li><img src="../images/banner03.jpg" title="Women2"></li>
</ul>
</div>
</div>
</div>
<div id="about">
<p>This content is for about.</p>
</div>
<div id="contact">
<p>This content is for contact.</p>
</div>
<div id="gallery">
<p>This content is for contact.</p>
</div>
<div id="affiliates">
<p>This content is for contact.</p>
</div>
<div id="bio">
<p>This content is for contact.</p>
</div>
</div>
</div>
</div>
</body>
</html>
您可能在css-tricks论坛上运气更好。可能有更多的机会在那里遇到同样的问题。 http://css-tricks.com/forums/ – Dominic 2012-02-05 04:05:12
显而易见的问题......作者指出文章已被弃用。你看过他/她的新链接吗？ – Scott 2012-02-05 04:05:52
您是否使用Firebug或其他网络检查器检查过错误？这可能会给你更多的信息，为什么你的代码不工作。最有可能的是一些JS错误。 – woodykiddy 2012-02-05 04:26:57