Question

我有Tab功能的以下代码，它工作得很好，我想要的方式，但我希望它在标签导航上没有<a>的情况下工作。

$(function () {
  $('.tab-content:not(:first)').hide();
  $('#tab-nav a').bind('click', function (e) {
    e.preventDefault();
    $this = $(this);
    $target = $(this.hash);
    $('#tab-nav a.current').removeClass('current');
    $('.tab-content:visible').fadeOut("fast", function () {
        $this.addClass('current');
        $target.fadeIn("fast");
    });
  }).filter(':first').click();
});

请查看此jsfiddle链接以更好地了解我的意思。我试图删除<a>代码并改用<li>。我希望它能够选择使用<li>代码或<div>代码。不是<a>标记。

我尝试删除<a>代码并使用<li>代替，如下所示，但是it doesn't appear to be working：

$(function () {
  $('.tab-content:not(:first)').hide();
  $('#tab-nav li').bind('click', function (e) {
    e.preventDefault();
    $this = $(this);
    $target = $(this.hash);
    $('#tab-nav li.current').removeClass('current');
    $('.tab-content:visible').fadeOut("fast", function () {
        $this.addClass('current');
        $target.fadeIn("fast");
    });
  }).filter(':first').click();
});

我真的可以在这方面使用一些帮助。提前谢谢。

Answer 1

为了识别目标，您可以使用data-*属性而不是href锚标记，以便您可以通过添加相应的数据属性来使用您希望创建导航的任何元素。 / p>

此外，为了识别导航项，您应该为它们添加一个公共类。我在以下示例中使用了类nav-item：

$(function() {
  $('.tab-content:not(:first)').hide();
  $('#tab-nav .nav-item').bind('click', function(e) {
    $this = $(this);
    $target = $($this.data("target")); // get the target from data attribute
    $('#tab-nav .nav-item.current').removeClass('current');
    $('.tab-content:visible').fadeOut("fast", function() {
      $this.addClass('current');
      $target.fadeIn("fast");
    });
  }).filter(':first').click();
});

#tabs-wrap {
  background: #ececec;
  padding: 30px 0;
}
.container {
  width: 95%;
  margin: 0 auto;
}
.tab-inner {
  padding: 20px;
}
/* Tab Navigation */

#tab-nav-wrap {
  padding: 10px 20px 10px 0;
  background: #252525;
}
#tab-nav-wrap #tab-nav {
  display: block;
  list-style: none;
  float: right;
}
#tab-nav .nav-item {
  list-style: none;
  display: block;
  float: left;
  padding: 10px 20px;
  margin-right: 10px;
  text-align: left;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  background: #000;
}
#tab-nav .nav-item.current, #tab-nav .nav-item:hover {
  border-bottom: 0px solid #ececec;
  background: #6a6a6a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-wrap">
  <div class="container">
    <div id="tab-one" class="tab-content">
      <div class="tab-inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
        ex ea commodo consequat.</div>
    </div>
    <!-- ends tab-one -->
    <div id="tab-two" class="tab-content">
      <div class="tab-inner">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
        feugait nulla facilisi.</div>
    </div>
    <!-- ends tab-two -->
    <div id="tab-three" class="tab-content">
      <div class="tab-inner">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
    </div>
    <!-- ends tab-three -->
    <!-- Tabs Navigation -->
    <div id="tab-nav-wrap">
      <ul id="tab-nav">
        <li class="nav-item" data-target="#tab-one">Tab One</li>
        <li class="nav-item" data-target="#tab-two">Tab Two</li>
        <li class="nav-item" data-target="#tab-three">Tab Three</li>
      </ul>
      <div style="clear:both;"></div>
    </div>
    <!-- ends tab-nav -->
    <div style="clear:both;"></div>
  </div>
  <!-- ends container -->
</div>
<!-- ends tabs-wrap -->

使jQuery标签在没有<a> tag</a>的情况下工作

1 个答案: