1

わかりましたので、表示と非表示を切り替えたい複数の div(7) があります。1 つの div が開いている場合は残りが非表示になり、新しい div を開くと他の div が非表示になります。以下のjqueryでこれを達成できました

function showDivs() {
    $(".head").click(function() {
        $(".Content").hide();
        $(this).next().fadeIn("slow");

    })
}

は.head各 div のヘッダーで、 は div.Contentのクラスです。showDivs()から呼び出すことで、完全に機能するようになりまし.head()た。問題は、ページの左側にul li設定したことです。7つのdivに対応する7つliのアイテムがあります。つまり、最初liのクリックで対応するものdivが開き、他のものは非表示になり、2 番目liのクリックで 2 番目divが開き、他のものは非表示になります。

li左側の項目のアクションでこれらの div を非表示にする方法を知っている人はいますか? にパラメータを渡す必要があることはわかっていますがshowDivs()、方法がわかりません。

助けていただければ幸いです

4

6 に答える 6

2

私はこれが.index()活躍するところだと信じています：

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e) {
            var i = $(this).index();
            $('div').hide();
            $('div:eq('+i+')').show();
        });
    });
});

これは非常に基本的なマークアップですが、コードで機能させる方法を理解できると確信しています。私が助けてくれることを願っています！

http://jsfiddle.net/Z3Hj7/

編集：あなたのフィドルを見た後、私はあなたが望むものを正確に解決したと思います：

$(function() {
    $('ul li').each(function() {
        $(this).click(function(e){
            e.preventDefault();
            var i = $(this).index();
            $('.content').hide();
            $('.head:eq('+i+')').next().show();
        }); 
    });
});

フィドルを見てみましょう: http://jsfiddle.net/DTcGD/25/

于 2011-07-24T12:14:44.553 に答える
0

以前に誰かが提案したように.index（）を使用したい場合は、これが最も簡単なアプローチであると信じています（http://jsfiddle.net/ECbkd/7/をチェックしてください）。

$("li").click(function() {
    $(".content").hide();
    $('.item').eq($(this).index()).children('.content').fadeIn();
})

これを追加して、ヘッダーをクリックしたときにコンテンツを表示できるようにすることもできます。

$("h2", ".container").click(function() {
    $(".content").hide();
    $(this).parent().children('.content').fadeIn();
})

*編集開始* ヘッダーのクリックでコンテンツを切り替えるには、次を使用します。

$("h2", ".container").click(function() {
    $(".content").not($(this).parent().children('.content')).hide();
    $(this).parent().children('.content').toggle();
})

ここでコードを更新 http://jsfiddle.net/ECbkd/8/* 編集終了*

これは次のようなhtmlに基づいています：

<ul>
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
    <li>Item 06</li>
    <li>Item 07</li>
</ul>
<div class='container'>
    <div class='item'>
        <h2>Header 1</h2>
        <div class='content'>Content 1</div>        
    </div>        
    <div class='item'>
        <h2>Header 2</h2>
        <div class='content'>Content 2</div>       
    </div>
    <div class='item'>
        <h2>Header 3</h2>
        <div class='content'>Content 3</div>       
    </div>
    <div class='item'>
        <h2>Header 4</h2>
        <div class='content'>Content 4</div>       
    </div>
    <div class='item'>
        <h2>Header 5</h2>
        <div class='content'>Content 5</div>       
    </div>
    <div class='item'>
        <h2>Header 6</h2>
        <div class='content'>Content 6</div>       
    </div>
    <div class='item'>
        <h2>Header 7</h2>
        <div class='content'>Content 7</div>       
    </div>

</div>
于 2011-07-24T13:29:01.113 に答える
0

各リスト アイテムに ID を割り当て、各アイテム コンテナに対応する ID を割り当てます。したがって、リスト アイテムは「item01」..「item07」の ID を取得し、コンテンツ コンテナーは「item01c」..「item07c」の ID を取得します。次に、次のようなことができます。

$("li").click(function() {
    showDivs($(this).attr("id"));
})

function showDivs(callerId) {
  $(".content").hide();
  $(".content", "#" + callerId + "c").fadeIn();  
}

実際の例はここで見ることができます: http://jsfiddle.net/ECbkd/5/ 1

于 2011-07-24T12:04:49.667 に答える
0

あなたの HTML 構造を正しく理解していれば、次のようになります。

<!-- The list... -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
  <div class="head">Header One</div>
  <div class="Content">Content One</div>
  <div class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

...4つではなく7つのアイテムのみ。

もしそうなら、これはそれを行います（ライブコピー）：

jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#container div.head:eq(" + $(this).index() + ")"));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

そこでは、コンテナ内のどこにあるかによって、リストをヘッダーに暗黙的に関連付けています。したがって、最初のものは class="head" で最初のliものに関連し、 2 番目のものは 2 番目のものなどに関連しています。divindexlidiv.head:eq

値ではなく構造的に行うとid、維持がはるかに簡単になります。ただし、代わりに、関連する divの値をli持つdata-div属性をそれぞれに与えることでそれを行うこともできます。id

<ul>
  <li data-div="h1">One</li>
  <li data-div="h2">Two</li>
  <li data-div="h3">Three</li>
  <li data-div="h4">Four</li>
</ul>
<div id="container">
  <div id="h1" class="head">Header One</div>
  <div class="Content">Content One</div>
  <div id="h2" class="head">Header Two</div>
  <div class="Content">Content Two</div>
  <div id="h3" class="head">Header Three</div>
  <div class="Content">Content Three</div>
  <div id="h4" class="head">Header Four</div>
  <div class="Content">Content Four</div>
</div>

次に (ライブコピー):

jQuery(function($) {

  $(".Content").hide();

  $("li").click(function() {
    showDivs($("#" + $(this).attr("data-div")));
  });
  $(".head").click(function() {
    showDivs($(this));
  });

  function showDivs(head) {
    $(".Content").hide();
    head.next().fadeIn("slow");
  }

});

data-*属性は HTML5 の時点で有効ですが、現在すべてのブラウザーでサポートされています。(これdata-*は、仕様への将来の追加と競合することなく、無効な属性を使用するための有効な方法を提供することによって、人々による無効な属性の使用を体系化し、管理しようとする試みです。)

于 2011-07-24T12:09:07.407 に答える
-1

li と対応する div に同じものを指定classすると、次のように言うことができます

function showDivs() {
$("li").click(function() {
    $(".Content").hide();
    clickedID = $(this).attr("class");
    $('div#'+clickedID).fadeIn("slow");

})

}

于 2011-07-24T12:01:13.940 に答える