当前位置： 文江博客话题详情

页面内容未显示

发布于 2025-01-02 17:58:45 字数 4640 浏览 0 评论 0原文

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

I'm using a menu bar from this tutorial: http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

When I replaced the content with my own, it does not load it. I'm putting in a slider with images and when I click one of the buttons it will not load it for some reason.

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

面犯桃花 2025-01-09 17:58:45

您缺少一个分号。

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

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

You were missing a semi-colon.

I added the semi-colon and a comment so you knew where it was. Hope that fixes it!

<!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>
回复 原文
~没有更多了~

关于作者

猥琐帝

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lee_heart

文章 0 评论 0

不喜欢何必死缠烂打

文章 0 评论 0

huangxaiorui

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

画离情绘悲伤

文章 0 评论 0

渚

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文