Onclick顯示/隱藏多個div jquery

我需要創建顯示/隱藏多個div的導航。Onclick顯示/隱藏多個div jquery

以下是我需要能夠做到：如果用戶點擊任何「選項」我需要一個名爲「選擇」關聯到當前選擇的或在所選擇的項目類nav - 這意味着將一個類添加到錨點。在下面的示例中，您將看到CSS類型爲「selected」類。

我也有麻煩試圖要麼「選項1」或「選項2」已選定的onload，使所有的div都沒有出現 - 的Onload我只需要一個DIV與出現正確的「選項」「選擇」如果這是有道理的。

歡迎任何建議！

2012-08-23 Filth

您應該使用數據屬性，因爲只有target不是真的有效。我把它改成data-target，做：

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

FIDDLE

on()將在jQuery的1.7+因此，如果使用jQuery的舊版本（你的提琴）只工作，堅持click()。

來源

2012-08-23 00:30:46 adeneo

下面是用小提琴你建議的方法，再加上點擊第一個元素，以開始工作：http://jsfiddle.net/XwN2L/420/ – dinjas

@dinjas - 謝謝，似乎我忘了保存小提琴，只是發佈OP的小提琴（尷尬）？ – adeneo

參見http://jsfiddle.net/XwN2L/415/。它會從所有.showSingle錨點中刪除「selected」類，然後將「selected」類添加到單擊的錨點。此外，它通過隱藏所有.targetDiv並僅顯示第一個問題來處理onload問題。

編輯：應該在頁面加載中突出顯示紅色的第一個選項。 http://jsfiddle.net/XwN2L/421/

來源

2012-08-23 00:30:48 irrelephant

編輯：對於非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-23 00:32:43

$('.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-23 00:41:39

對於你的第一個麻煩，你可以將以下兩行添加到您的單擊事件：

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

或者像Irrelepant說（實際上是一個更好的辦法）：

$(this).addClass('selected').siblings().removeClass('selected');

來源

2012-08-23 01:10:33 user1502531

Onclick顯示/隱藏多個div jquery

回答

相關問題