Question

我需要这个功能用于我正在创建的标签。到目前为止，有一个活动选项卡，默认情况下显示内容。

我希望在mouseover事件上显示内容，并在mouseout事件中隐藏内容。我不想要一个活动标签。

默认情况下，这是标签的显示方式：

 <ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>

Answer 1

你的HTML不太对劲。 data-tab应为data-tabs，并且指示标签是否有效的类称为is-active。

一旦你的html结构正确，你可以使用基金会提供的selectTab方法以编程方式选择一个标签：

var target = document.getElementById("all-tabs");
var options = {}; //Define options e.g. "option1" : "value1", etc.                                  

var elem = new Foundation.Tabs($(target), options);

$('.tabs-title').on("mouseover", function() {
  //Find the associated panel id.
  var panelId = $(this).find("a").attr("href").substring(1);
  var tabContents = document.getElementById(panelId);
  //Use the "tabs" object to select the associated panel.
  elem.selectTab($(tabContents));
  //Show the tab contents.
  $(tabContents).show();
}).on("mouseout", function() {
  var panelId = $(this).find("a").attr("href").substring(1);
  $(this).find("a").attr("aria-selected", "false");
  var tabContents = document.getElementById(panelId);
  //Hide the tab contents.
  $(tabContents).hide();
});

<强> Fiddle Demo

悬停以显示标签内容

1 个答案: