2

複数の div を表示/非表示にするナビゲーションを作成する必要があります。

ユーザーが「オプション」のいずれかをクリックした場合、ナビゲーション内で現在選択されているアイテムまたは選択されているアイテムに関連付けられた「選択された」という名前のクラスが必要です。これは、クラスをアンカーに追加することを意味します. 以下の例では、「選択された」クラスの CSS スタイルがあることがわかります。

現在の進行状況を表示

また、すべての div が表示されないように、「オプション 1」または「オプション 2」のいずれかを既にオンロードで選択しようとしても問題があります。理にかなっています。

すべての提案を歓迎します!

4

5 に答える 5

3

target本当に有効ではないため、データ属性を使用する必要があります。私はそれを次のように変更しましdata-targetた：

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});​

フィドル

on()jQuery 1.7以降でのみ機能するため、古いバージョンのjQuery（あなたのフィドル）を使用している場合は、click().

于 2012-08-23T00:30:46.763 に答える
1 
$('.showSingle').click(function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   $('.showSingle').removeClass('selected')
   $(this).addClass('selected');           
});

var active_link = 1; // Change this value to set the active link
$('a[target='+active_link+']').trigger('click');​
于 2012-08-23T00:41:39.963 に答える
1

http://jsfiddle.net/XwN2L/415/を参照してください。すべてのアンカーから「選択された」クラスを削除.showSingleし、クリックされたアンカーに「選択された」クラスを追加します。.targetDivまた、すべての を非表示にして最初の 1 つだけを表示することで、オンロードの問題を処理します。

編集:ページの読み込み時に最初のオプションも赤で強調表示する必要があります。http://jsfiddle.net/XwN2L/421/

于 2012-08-23T00:30:48.467 に答える
1

編集:非JQueryソリューションの場合、これを試してください:

function showHide(element) { 
     var field = document.getElementById(element); 
     if (element) { 
          if (field.style.display == 'none') { 
                field.style.display = 'block'; 
          } else { 
                field.style.display = 'none'; 
          } 
     } 
}

それはあなたのJSで表示および非表示にするコードになります

<div class="buttons">
    <button class="showSingle" target="1" onClick="showHide(div1);">Option 1</button>
    <button class="showSingle" target="2" onClick="showHide(div2);">Option 2</button>
    <button class="showSingle" target="3" onClick="showHide(div3);">Option 3</button>
    <button class="showSingle" target="4" onClick="showHide(div4);">Option 4</button>
</div>

<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>​

これで始められるはずです:-)

Jqueryを完全に見逃した

于 2012-08-23T00:32:43.777 に答える
0

最初の問題については、次の 2 行をクリック イベントに追加できます。

    $(".buttons .selected").removeClass("selected");
    $(this).addClass("selected");

または、関係のない人が言うように（実際にはより良い方法です）：

$(this).addClass('selected').siblings().removeClass('selected');
于 2012-08-23T01:10:33.747 に答える