0

*编辑：这是该站点的临时版本的链接：http: //staging-site.site44.com/ *

我对 jquery 非常陌生，所以如果这个问题非常简单，我深表歉意。我要在我的网站上做的首先是在页面加载时让我的#topContent div 中的内容淡入。

但除此之外，我还希望我的主导航使用 jquery 主题标签来切换显示在#topContent div 中的页面内容。我已经阅读了一些关于如何在 jquery 中执行此操作的内容，从我所阅读的内容来看，我认为我需要在我的主 html 文档中创建页面部分，这些部分在选择某个导航链接之前是隐藏的 - 然后隐藏内容当前显示并显示与刚刚选择的导航链接相关的内容，我离我有多近？

到目前为止，这是我的尝试...

HTML

<nav id="headerNav">

            <ul class="navList">
                <li class="navItem"><a href="#products" class="transition">Products</a></li>
                <li id="view-about" class="navItem"><a href="#about" class="transition">About</a></li>
                <li class="navItem"><a href="#portfolio">Portfolio</a></li>
                <li class="navItem"><a href="#">Contact</a></li>
            </ul>
        </nav>


    </div>

</div>

<!-- topMain -->
<div id="topContentWrapper">

    <div id="topContent">



            <div id="#products">
                <h2>Test worked! - products </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="#about">
                <h2>Test worked! - about </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="#portfolio">
                <h2>Test worked! - Portfolio </h2>
                <p>this test just worked sooo hard!</p> 
            </div>



    </div>




</div>

JS

// Fade In Effect

$(document).ready(function() {
    $("#topContent").css("display", "none");
    $("#topContent").fadeIn(2000);

$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#topContent").fadeOut(1000);      
});

function redirectPage() {
    window.location = linkLocation;
}

$("#view-about").click(function(event){
    $("#products").fadeOut(1000);
    $("#portfolio").fadeOut(1000);   
    $("#about").fadeIn(1000); 
});

});
4

2 回答 2

0

好的，这段代码应该可以工作：

$(function(){
    $last = null;
    $(".navList li a").click(function(){
        if ($last != null) $last.fadeOut(1000);
        $last = $($(this).attr("href"));
        $($(this).attr("href")).fadeIn(2000);
    });
});

但是，您需要将您的更改topContent为：

    <div id="topContent">



            <div id="products" style="display: none;">
                <h2>Test worked! - products </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="about" style="display: none;">
                <h2>Test worked! - about </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="portfolio" style="display: none;">
                <h2>Test worked! - Portfolio </h2>
                <p>this test just worked sooo hard!</p> 
            </div>



    </div>

原因：

首先，你需要你id的 s 是这样的：id="about"而不是 this: id="#about"。指定的前面id不需要 a 。#（与设置标签时class不需要 a相同）.

我在本地测试的 jQuery 代码，所以它应该可以工作。

笔记：

您可能希望自动显示一些不同的内容，因为现在加载时它是空白的，直到您单击其中一个链接。

希望这有帮助！

编辑：

我建议您将代码更改为：

ids =   [ "products", "about", "portfolio" ];
links = [ "Products", "About", "Portfolio" ];

$(function(){
    $last = null;
    $(".navList li a").click(function(){
        New = "#" + ids[links.indexOf($(this).text())];
        if ($last != null) $last.fadeOut(1000);
        $last = $(New);
        $(New).fadeIn(2000);
    });
});

因为它将所有内容不断地保存在同一个地方。为此，您需要更改代码的另外两个部分：

<ul class="navList">
    <li class="navItem"><a href="#topContent" class="transition">Products</a></li>
    <li id="view-about" class="navItem"><a href="#topContent" class="transition">About</a></li>
    <li class="navItem"><a href="#topContent">Portfolio</a></li>
    <li class="navItem"><a href="#topContent">Contact</a></li>
</ul>

和：

    <div id="topContent">



            <div id="products" style="display: none; position: absolute">
                <h2>Test worked! - products </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="about" style="display: none; position: absolute">
                <h2>Test worked! - about </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="portfolio" style="display: none; position: absolute">
                <h2>Test worked! - Portfolio </h2>
                <p>this test just worked sooo hard!</p> 
            </div>



    </div>

最后一部分只是我的建议，但做任何你需要的。

于 2013-01-11T17:03:40.503 回答
-1

而不是在您的 a.transition 处理程序中执行此操作：

$("#topContent").fadeOut(1000);

做：

$("#topContent").children().fadeOut(1000);

问题是您实际上正在淡出更高级别的项目，因此即使您将它们淡入，孩子们也不再可见。

于 2013-01-11T17:39:47.873 回答