0

私は2つのDIVを持っています。1 つにはリストがあり、もう 1 つには DIV のコレクションがあります。

<div>
    <ul>
        <li><a>One</a></li>
        <li><a>Two</a></li>
        <li><a>Three</a></li>
    </ul>
</div>
<div>
    <div>Some content one</div>
    <div>Some content two</div>
    <div>Some content three</div>
</div>

ハイパーリンク「One」をクリックすると、最初の DIV (一部のコンテンツ 1) を表示し、他のすべての DIV を非表示にします。ハイパーリンク「Two」をクリックすると、2 番目の DIV (いくつかのコンテンツ 2) を表示し、他のすべてを非表示にします。jQueryで配列を使用してこれを達成するにはどうすればよいですか? 他の方法でも構いません。

御時間ありがとうございます。

4

5 に答える 5

2 
$('li').click(function() {
    var which = $(this).index();
    $('div').find('div').hide().eq(which).show();
});

働くフィドル

于 2012-11-01T22:19:48.847 に答える
2

なんてこった：

$('a')​​.on('click', function(e) {
    e.preventDefault();
    $('div>div').eq($(this).closest('li').index()).show().siblings().hide();
})​;​

フィドル

于 2012-11-01T22:28:20.113 に答える
0

HTML を少し変更します。

<div>
    <ul>
        <li><span data-showclass=".show_1">One</span></li>
        <li><span data-showclass=".show_2">Two</span></li>
        <li><span data-showclass=".show_3">Three</span></li>
    </ul>
</div>
<div id="swichDiv">
    <div class="show show_1">Some content one</div>
    <div class="show show_2">Some content two</div>
    <div class="show show_3">Some content three</div>
</div>

そしてjQuery：

$('ul li span[data-showclass]').click(function(){
  $('#swichDiv .show').hide().filter($(this).data('showclass')).show();
});
于 2012-11-01T22:21:01.323 に答える
0

一意の行の複数行。

// show hide in jquery
$('.showdata').hide(); // hide all on start

$('.showhide').click(function (e) {
    //e.preventDefault();
    var SH = this.SH ^= 1; // "Simple toggler"
    $(this).text(SH ? 'Hide' : 'Show')
    var id = event.target.id; // get id 
    //alert(event.target.id);
    $('#data' + id).toggle(); // show this one
});



<p><span class="showhide" id="1">Show</span>&nbsp;<span class="showdata" id="data1">content1</span> </p>

<p><span class="showhide" id="2">Show</span>&nbsp;<span class="showdata" id="data2">content2</span> </p>
于 2014-03-27T13:34:24.500 に答える
-1

最も簡単な方法は、対応する id とクラスの div とアンカーを指定することです

これを確認してください..まだ最適化できます

HTML

<div>
    <ul>
        <li><a id="wrapper1">One</a></li>
        <li><a id="wrapper2">Two</a></li>
        <li><a id="wrapper3">Three</a></li>
    </ul>
</div>
<div class="wrap">
    <div class="wrapper1" style="display:none">Some content one</div>
    <div class="wrapper2" style="display:none">Some content two</div>
    <div class="wrapper3" style="display:none">Some content three</div>
</div>​

Javascript

$('[id^="wrapper"]').on('click', function(e) {
    e.preventDefault();
    $('.wrap > div').hide();

    $('.'+ this.id).show();
});​

フィドルをチェック

于 2012-11-01T22:20:01.417 に答える