-1

いくつかのセクションがあり、jQuery を使用してそれぞれをロードしたいのですが、ナビゲーションで各セクションが選択されているときに、ページ内のいくつかの静的要素を非表示にし、他のセクションを非表示にして (以前に選択してロードしたことがある場合)、現在のセクションを表示したいと考えています。 、すべてのナビゲーション アイテムに対してクリック イベントを記述し、それらの要素のフェード アウトとフェード インを試すことでそれを行うことができますが、どうすれば簡単に行うことができますか?

私が持っているとしましょう：#background #elem1 #elem2
ナビゲーションリンクのいずれかがクリックされた場合、この3つを非表示にしたい.

そして、私は持っています: content.html#section1 #section2 #section3 #section4 ...と 呼ばれる単一のファイルにあります そしてライトボックス、言ってみましょう
#light

ユーザーが のようなリンクをクリックしたときに#nav-section1、次のことを実行したいとします。

フェードアウト:#background #elem1 #elem2 フェードアウト:#section2 #section3 #section4 ... フェードイン:#light フェードイン:#section1

私のナビゲーションは次のようになります。

<a class="navigation" id="nav-section1" name section1">Section1</a>
<a class="navigation" id="nav-section2" name section2">Section2</a>
...

jQuery は次のようにする必要があります: (ここに配置するクリックされたアイテムの名前.load: content.html#name)

$("a.navigation").click(function(event){
    $("#light").fadeIn("slow");
    $("#light").load("content.html #"+$(this).attr('name')+);
}

私はそれが間違っていることを知っており、私が望むすべてのことを行うわけではないので、誰か親切に修正してもらえますか?

4

2 に答える 2

0

+末尾の を削除して、構文エラーを修正する必要があります。

$("a.navigation").click(function(event) {
    $("#light").fadeIn("slow");
    $("#light").load("content.html #" + $(this).attr('name'));
}

それに加えて、あなたの HTML は現在無効です。次のようになります。

<a class="navigation" id="nav-section1" name="section1">Section1</a>

ただし、nameこれを使用するのはあまり適切ではありません。data代わりに属性を使用します。

<a class="navigation" id="nav-section1" data-name="section1">Section1</a>

JS を次のように変更します。

$("#light").load("content.html #" + $(this).data('name'));
于 2012-12-23T16:19:39.340 に答える
0

name 属性の後に欠落が=あり、 で値を囲む必要がありますquotes。

変化する

<a class="navigation" id="nav-section1" name section1">Section1</a>
<a class="navigation" id="nav-section2" name section2">Section2</a>

に

<a class="navigation" id="nav-section1" name="section1">Section1</a>
<a class="navigation" id="nav-section2" name="section2">Section2</a>

の最後に余分な+記号があります$(this).attr('name')

変化する

$("#light").load("content.html #"+$(this).attr('name')+);

に

$("#light").load("content.html #"+$(this).attr('name'));
于 2012-12-23T16:20:37.300 に答える