如何隱藏其他標籤內容並僅顯示帶有JQuery的選定標籤內容？

Question

正如你在HTML中看到的那樣，有六個按鈕需要作爲標籤切換按鈕來工作。所選按鈕必須具有額外的類「當前」，以便我可以設置當前按鈕的樣式（例如 - 當前選項卡按鈕類應該是「按鈕 - 常規 - 當前」）。

另外我真的不知道如何使這些標籤工作。我知道我需要使用JS/JQuery，但是對這些事情沒有太多經驗。

從「功能表」的div class應該是被默認爲非牆根，當我點擊「選項卡1」按鈕，信息應以信息從「容器表1」的div容器等變化信息

我很抱歉我的英語不好，但我希望你能理解。 :)

我的HTML：

<div class="tabs-button-container"> 
 
    <div class="tabs-title"> 
 
    <h2>Block Title</h2> 
 
    </div> 
 
    <div class="buttons"> 
 
    <div class="buttons-featured"><a href="#">Featured Tab</a></div> 
 
    <div class="buttons-regular"><a href="#">Tab 1</a></div> 
 
    <div class="buttons-regular"><a href="#">Tab 2</a></div> 
 
    <div class="buttons-regular"><a href="#">Tab 3</a></div> 
 
    <div class="buttons-regular"><a href="#">Tab 4</a></div> 
 
    <div class="buttons-regular"><a href="#">Tab 5</a></div> 
 
    </div> 
 
</div> 
 

 
<div class="featured-table"> 
 
    <p>Tab content</p> 
 
</div> 
 
<div class="container-table-1" style="display:none"> 
 
    <p>Tab content</p> 
 
</div> 
 
<div class="container-table-2" style="display:none"> 
 
    <p>Tab content</p> 
 
</div> 
 
<div class="container-table-3" style="display:none"> 
 
    <p>Tab content</p> 
 
</div> 
 
<div class="container-table-4" style="display:none"> 
 
    <p>Tab content</p> 
 
</div> 
 
<div class="container-table-5" style="display:none"> 
 
    <p>Tab content</p> 
 
</div>

Answer 1

你可以利用data屬性。

你可以編輯自己的標籤，像這樣：

<div class="buttons"> 
    <div data-tabid="f" class="tab buttons-featured"><a href="#">Featured Tab</a></div> 
    <div data-tabid="1" class="tab buttons-regular"><a href="#">Tab 1</a></div> 
    <div data-tabid="2" class="tab buttons-regular"><a href="#">Tab 2</a></div> 
    <div data-tabid="3" class="tab buttons-regular"><a href="#">Tab 3</a></div> 
    <div data-tabid="4" class="tab buttons-regular"><a href="#">Tab 4</a></div> 
    <div data-tabid="5" class="tab buttons-regular"><a href="#">Tab 5</a></div> 
</div> 

這增加了data屬性將作爲一個標識符的標籤。此外，還添加了類tab以允許我們抓住jQuery中的選項卡。

下一個改變你的容器在標籤

<div class="wrapper"> 
    <div class="featured-table" data-blockid="f"> 
    <p>Tab content f</p> 
    </div> 
    <div class="container-table-1" data-blockid="1" style="display:none"> 
    <p>Tab content 1</p> 
    </div> 
    <div class="container-table-2" data-blockid="2" style="display:none"> 
    <p>Tab content 2</p> 
    </div> 
    <!-- and so on --> 
</div> 

注意，我添加了一個包裝div現在使用jQuery

$('.tab').click(function(){ 
    var tabID = $(this).data('tabid'); // Get the tab ID data attribute 

    // Remove all instances of "current" class from tabs 
    $('.buttons').children().removeClass('current'); 

    // Add "current" class to selected tab 
    $(this).addClass('current'); 

    // Hide all elements under the wrapper class 
    // Same thing can be achieved with .children().css("display", "none"); 
    $('.wrapper').children().hide(); 

    // Show the container using the data attribute "blockid" as a selector 
    // Again same thing with .find("[data-blockid="+tabID+"]").css("display", "block"); 
    $('.wrapper').find("[data-blockid="+tabID+"]").show(); 
}); 

容器

圍繞匹配data屬性

這是一個JSFiddle

Answer 2

添加在container-table一個類名，以便以後可以處理它像

... 
<div class="tab container-table-3" style="display:none"> 
    <p>Tab content</p> 
</div> 
<div class="tab container-table-4" style="display:none"> 
    <p>Tab content</p> 
</div> 
<div class="tab container-table-5" style="display:none"> 
    <p>Tab content</p> 
</div> 

然後，當按鈕點擊時，執行這個腳本：$(".tab").css("display", "none")。並顯示您將要使用$(SOME_CLASS).css("display", "block)顯示的div。

你也可以做類似的按鈕，所以你可以做點擊效果或別的東西。也許你可以使用addClass()或removeClass()方法按鈕。

https://jsfiddle.net/h213ue65/1/退房jsfiddle！

Answer 3

四種方式隱藏和顯示：

$(element).fadeIn(200) 
$(element).fadeOut(200) 

$(element).show() 
$(element).hide() 

$(element).css('display', 'block') 
$(element).css('display', 'none') 

$(element).removeClass('hide').addClass('show') 
$(element).removeClass('show').addClass('hide') 

這樣：

// If a button is clicked 
$(".buttons-regular").click(function() 
{ 
    // Would require needing to hide all others 
    //check which button was clicked via $(this) 
    if($(this).text() == "Tab 1") 
      // Show content 
      $('.container-table-1').fadeIn(200); 
}