Question

* 编辑：以下是指向该网站暂存版本的链接：http://staging-site.site44.com/ *

我对jquery非常新，所以如果这个问题非常简单，我道歉。我在网站上尝试做的是首先加载页面时我的#topContent div中的内容会淡入。

但除此之外，我还希望我的主导航使用jquery hashtags来切换#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); 
});

});

Answer 1

好的，这段代码应该有效：

$(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这样：id="about"而不是id="#about"。指定的id前面不需要#。（与class设置标签时.不需要的方式相同）

我在本地测试的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>

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

Answer 2

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

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

做的：

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

问题在于你实际上淡出了更高级别的项目，因此即使你淡化它们，孩子也不再可见。

使用JQuery主题标签淡入＆amp;淡出特定div的内容

2 个答案:

修改