0

*編集: サイトのステージング バージョンへのリンクは次のとおりです: http://staging-site.site44.com/ *

私はjqueryに非常に慣れていないので、この質問が非常に単純である場合は申し訳ありません. 私が自分のウェブサイトでやろうとしているのは、ページがロードされたときに最初に #topContent div のコンテンツをフェードインさせることです。

しかし、これに加えて、メイン ナビゲーションで jquery ハッシュタグを使用して、#topContent div に表示されるページ コンテンツを切り替えたいと考えています。私はjqueryでこれを行う方法について少し読んだことがあります.現在表示されており、選択したばかりのナビゲーション リンクに関連付けられているコンテンツが表示されている場合、どれくらい近いですか?

これまでのところ、これを行うための私の試みは次のとおりです...

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

OK、このコードは機能するはずです：

$(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"そしてこれではありません：id="#about"。指定されたものはその前にidある必要はありません#。（タグを設定するときに、classが必要ない方法と同じです）.

ローカルでテストしたjQueryコードなので、動作するはずです。

ノート：

リンクの1つをクリックするまで、コンテンツが読み込まれると空白になるため、いくつかの異なるコンテンツを自動的に表示したい場合があります。

これがお役に立てば幸いです。

編集：

コードを次のように変更することをお勧めします。

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);
    });
});

すべてのコンテンツを常に同じ場所に保持するためです。これを機能させるには、コードのさらに2つのセクションを変更する必要があります。

<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 に答える