个人中心
gpt4 book ai didi

jquery - 页面内容未显示

转载 作者：行者123 更新时间：2023-12-01 06:03:12 24 4
gpt4 key购买 nike

我正在使用本教程中的菜单栏:http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

当我用自己的内容替换内容时，它不会加载它。我放入了一个带有图像的 slider ，当我单击其中一个按钮时，由于某种原因，它不会加载它。

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

最佳答案

您缺少一个分号。

我添加了分号和注释，以便您知道它在哪里。希望能解决这个问题!

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

关于jquery - 页面内容未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9146798/

24 4 0
文章推荐： python - 注册后即可获取 Facebook 好友
文章推荐： ruby-on-rails - Net::ReadTimeout: Net::ReadTimeout 和 Selenium::WebDriver::Error::UnknownError: unknown error: Chrome failed to start on Rails 5.1.beta 系统测试
文章推荐： php - Ajax 多个 div
文章推荐： jquery - 创建 "Lasso tool"来选择元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com