僅當另一個選項卡被點擊和/或激活時才顯示選項卡？

我還有一個簡單的問題。我有一組DIV作爲Tabs。（類似jQueryUI的標籤）。我的問題是這個，它應該包含一個簡短而簡潔的答案（我希望= P）。僅當另一個選項卡被點擊和/或激活時才顯示選項卡？

我想知道如何將現有的JS（如下所示）更改爲ID爲＃tab-2的選項卡被點擊或處於活動狀態（以較好或甚至兩者爲準）的情況下，然後然後才顯示帶有＃tab-4標識的選項卡。

這樣，當用戶點擊＃tab-2時，出現＃tab-4。如果＃tab-2未被點擊或激活，則標籤4被隱藏。

我想這將是容易的，也許是我在分析它，但這裏是我JS：

$(function() { 
if $('#tab-2').click(function() { 
    $('#tab-4').show(); 
    }; 
else $('#tab-4').hide(); 
    }; 
});

}）;

HTML更新：

不能更新，因爲這麼的代碼編輯器是胡扯IMO。看看https://jqueryui.com/tabs/是一個很好的參考。

這看起來不錯，我知道是因爲某些原因不起作用大聲笑。任何幫助表示讚賞。 =）

來源

2014-04-08 user3267537

個人而言，我會使用CSS。將類應用於兩個選項卡的父級。 '.show-tabs-2-4'會顯示兩個選項卡，而'.show-tabs-2'會是一個特定的選項卡。 – Jack

@Jack Pattishall Jr .:請詳細說明一下嗎？也許給我看一些代碼？的jsfiddle ..？此外，我寧願使用jQuery，如果這有助於任何，但如果你給我看一個體面的CSS替代品，我會很樂意嘗試它...... =）在此先感謝... – user3267537

@ user3267537它是純粹的CSS可行，但它不是用戶友好的，並且暗示使用額外的HTML元素'label'和'checkboxes'。很亂。 –

你幾乎有

if $('#tab-2').click(function() {是錯誤的，有些錯位的;。

$(function() { // DOM ready shorthand 

    $('#tab-2').click(function() { 
     $('#tab-4').toggle(); 
    });       

});

這也是您使用指向所有標籤頁的選擇會有所幫助，所以當你啥子先全部關閉，你可以這樣做：$('.tab').hide(); // First, hide all...

通過觀察你的HTML我會當然會給你一個更好的建議...直到比。

來源

2014-04-08 02:34:14

它似乎沒有工作。我確信我需要使用布爾值來執行此操作。對了，然後我仍然適應JS和JQ哈哈。另外，我更新了OP以顯示HTML ...或者，https://jqueryui.com/tabs/可以爲您提供一個好主意。 – user3267537

@ user3267537你能解釋一下什麼是不工作*？預期的結果是什麼？你的問題根本不明確。 –

注意，我不熟悉SO中的代碼編輯器，你是對的。但預期的結果是，標籤4被隱藏，直到標籤2被點擊/激活。如果選項卡2未被激活/單擊，則選項卡4將隱藏。這意味着選項卡4僅在單擊選項卡1或激活時纔可見。這就是爲什麼我儘管並用布爾值來表示選項卡2是否被點擊的情況。ID＃tab-2被點擊，.show＃tab-4。否則，.hide＃tab-4。在此先感謝=） – user3267537

選定的答案沒有錯，但你要求我詳細說明:)這是一個快速的JS小提琴，演示了我的建議。

首先，小提琴：http://jsfiddle.net/GY356/

的主要區別是，（通過調用$(this).show()，$(this).hide()，或$(this).toggle()），而不是使用jQuery直接顯示/隱藏元素，我們設置一個類的父（在我們的情況下，點擊標籤的id）。

來源

2014-04-08 08:38:42 Jack

僅當另一個選項卡被點擊和/或激活時才顯示選項卡？

回答

相關問題