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

在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)向您展示您要展示的内容。

你也可以在按钮中做类似的事情，这样你就可以点击效果或其他东西。也许您可以使用addClass()或removeClass()方法获取按钮。

https://jsfiddle.net/h213ue65/1/查看jsfiddle！

Answer 3

您可以使用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

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

3 个答案: