Question

我正在使用jquery ui标签来创建单页应用。我构建了页面导航布局。最后一件事是将导航转换为标签。

我在转换到标签式布局时遇到了困难，同时保持了页面的相同外观。

我已经使用设置创建了JSFIDDLE。应用了一些css重置（你可以忽略它），在JS下，有

//        $("#pagewraper").tabs();

我希望我可以使用标签的功能，但保留我在addig标签功能之前设计的外观。可以这样做吗？我最好编写自己的标签功能吗？

Answer 1

您可以制作自定义标签脚本。这是我如何修改你的。

将此添加到CSS：

#container div {
  display: none;
  padding: 1em;
}

#container div.tab-content-visible {
  display: block;
}

这将隐藏选项卡内容，并为它们提供一些填充，以便它们不会被压在页面的边框上。当其中一个div具有“tab-content-visible”类时，它将再次出现。

轻微更改HTML中的两个位置。这是第一个：

<ul class="app-nav">
  <li><a href="#tabs-1" class="current-tab">Tab 1</a></li>
  <li><a href="#tabs-2">Tab 2</a></li>
  <li><a href="#tabs-3">Tab 3</a></li>
  <li><a href="#tabs-4">Tab 4</a></li>
</ul>

将类current-tab添加到第一个选项卡。这很快就会有意义。

<div id="container">
  <div id="tabs-1" class="tab-content-visible">
    <p>Tab one content</p>
  </div>
  <div id="tabs-2">
    <p>Tab two content</p>
  </div>
  <div id="tabs-3">
    <p>Tab three content</p>
  </div>
  <div id="tabs-4">
    <p>Tab four content</p>
  </div>
</div>

将类标签内容可见添加到第一个标签的数据中。到目前为止，这些HTML和CSS编辑隐藏了每个选项卡的选项卡数据，第一个选项卡除外。因此，您的第一个标签现在是“默认”标签。

最后，将以下内容添加到您的javascript：

$(".app-nav li").click(function(e) {
  $(this).find("a").click();
});

$(".app-nav li a").click(function(e) {
  $(".current-tab").removeClass("current-tab");
  $(".tab-content-visible").removeClass("tab-content-visible");

  $(this).closest("li").addClass("current-tab").removeClass("app-nav-selected");

  var selector = $(this).attr("href");
  $(selector).addClass("tab-content-visible");
  e.preventDefault();
});

这是如何工作的。如果单击LI，则会找到其中的锚标记，并触发其onclick处理程序。

如果单击选项卡的锚标记，首先要做的是 - 当前选项卡无效。我们从当前选项卡中删除current-tab类，从可见选项卡数据中删除可见类。然后，我们将current-tab类添加到此锚点的LI父级（最接近的是找到与选择器匹配的最近祖先的函数），并添加类current-tab。请注意，由于您的悬停处理程序，我们还必须在此时删除“app-nav-selected”，否则切换将被搞砸。检查你的悬停处理程序，看看为什么会这样。

最后，锚标记的href用于获取一个选择器，该选择器可用于查找我们想要显示的选项卡数据。我们为它添加了可见的类名，我们就完成了。除了调用e.preventDefault（）之外，这将阻止链接实际将用户带到任何地方。它还会阻止页面滚动，这可能导致选项卡从视图中消失。它不会破坏实现，因为用户可以向上滚动，但它肯定不会很漂亮。

将ul列表转换为选项卡，同时保持相同的外观

1 个答案: