Question

我正在使用本教程中的菜单栏：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>

Answer 1

你错过了一个分号。

我添加了分号和评论，以便您知道它在哪里。希望能解决它！

<!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();
                }); //THIS ; WAS MISSING.
            }

            //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>

页面内容未显示

1 个答案: