如何使用 JQuery 隐藏其他选项卡内容并仅显示选定的选项卡内容？

Question

正如您在 HTML 中看到的，有六个按钮需要用作选项卡切换按钮。选定的按钮必须有额外的“当前”类，以便我可以设置当前按钮的样式（例如 - 当前选项卡按钮类应该是“按钮-常规-当前”）。

另外，我真的不知道如何使这些选项卡工作。我知道我需要使用 JS/JQuery，但对这些东西没有太多经验。

默认情况下，“featured-table”div 类中的信息应该是非隐藏的，当我点击“Tab 1”按钮时，信息应该随着“container-table-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

四种隐藏和显示方式：

$(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);
}

Answer 2

您可以使用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 中抓取选项卡。

接下来更改您的容器以匹配选项卡中的data 属性

<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();
});

这是JSFiddle

Answer 3

在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 中签出！