8

どのhrefクラスが「選択されている」かに基づいてdivを表示および非表示にできる必要があります。以下のコードがあります。

http://jsfiddle.net/XwN2L/722/

上記のフィドルの「all」オプションを削除する必要があります。

したがって、基本的に、hrefが選択されたクラスを持つ場合、hrefの2つのリンクが表示され、ユーザーが別のhrefをクリックすると、前のリンクが非表示になり、クラスが「選択された」新しいリンクが表示されます。

リンクをクリックすると、選択したクラスが変更され、それに応じてボタンが非表示および表示されますか？

ほぼ最後のビットで助けが必要です。

<div class="buttons">
 <a id="showall">All</a>
 <a class="showSingle" target="1">Div 1</a>
 <a class="showSingle selected" target="2">Div 2</a>
 <a class="showSingle" target="3">Div 3</a>
 <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">
 <a href="#" class="button3">1a</a>
 <a href="#" class="button3">1b</a>
</div>

<div id="div2" class="targetDiv">
 <a href="#" class="button3">2a</a>
 <a href="#" class="button3">2b</a>
</div>

<div id="div3" class="targetDiv">
  <a href="#" class="button3">3a</a>
  <a href="#" class="button3">3b</a>
</div>

<div id="div4" class="targetDiv">popup COMPLETE</div>

<script>
 jQuery(function(){
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
     });
 });​
<script>

乾杯

4

1 に答える 1

4

data-*次の属性を使用できます。

<div class="buttons">
  <a  id="showall" data-target="all" >All</a>
  <a  class="showSingle" data-target="1">Div 1</a>
  <a  class="showSingle selected" data-target="2">Div 2</a>
  <a  class="showSingle" data-target="3">Div 3</a>
  <a  class="showSingle" data-target="4">Div 4</a>
</div>


var $target = $('.targetDiv'); // caching object for better performance

$('.buttons a').click(function(e) {
    e.preventDefault();
    $(this).addClass('selected').siblings().removeClass('selected');
    var target = $(this).data('target');
    if (target === 'all') {
        $target.show();
    } else {
        $target.hide().filter('#div' + target).show();
    }
});

http://jsfiddle.net/fKHsB/

于 2012-10-30T13:32:21.193 に答える