Question

我尝试使用.tab-content div中的链接链接到其他标签之一，但链接不起作用。这些不是jQuery UI选项卡。

顶部标签.tab-link链接当然可以在标签之间切换。是否可以从一个标签的.tab-content链接并打开另一个标签？

即。在<a href="#case-story">link to tab</a>中使用.tab-content打开<a href="#case-story" class="tab-link">标签？

每个标签的HTML都是这样的：

<ul class="accordion-tabs-minimal">

<li id="tab-overview" class="tab-header-and-content client-case__overview">
<a href="#overview" class="tab-link"><span class="title">Overview</span></a>

<div class="tab-content">
Example Link to other tab <a href="#case-story">Case Story</a>
</div>
</li>

<li id="tab-case-story" class="tab-header-and-content client-case__case_story">
<a href="#case-story" class="tab-link">
<span class="title">The Story</span>
</a>

<div class="tab-content">
lorem ipsum lorem      
</div>
</li>

这是启用＆＃34;标签＆＃34;的jQuery。显示/隐藏内容的链接;我如何在标签正文中启用链接 - 在tab-content - 还显示/隐藏内容？

$(function() {

  $('.accordion-tabs-minimal').each(function(index) {

    var tab = '';
    // Check, if there is a tab id in url.
    if (window.location.hash) {
      tab = $(this).find('li#tab-' + window.location.hash.substr(1));
    }

    if (tab.length) {
      tab.children('a').addClass('is-active').next().addClass('is-open').show();
    } else {
      if ($(window).width() >= 768) {
        $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
      }
    }
  });


  $('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
    if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs-minimal');
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').toggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');

      if ($(window).width() >= 768) {
        window.location.hash = '#' + $(this).parent().attr('id').substr(4);
      }
    } else {
      event.preventDefault();

      if ($(window).width() < 768) {
        $(this).removeClass('is-active');
        $(this).next().removeClass('is-open').hide();
      }
    }
  });

});;

完整标记和Javascript是一个小提琴：https://jsfiddle.net/r64nj6pL/39/ 尝试＆＃34;概述＆＃34;中的链接标签;它没有进入＆＃34;案例故事＆＃34;标签

Answer 1

为什么不直接触发匹配标签链接的点击事件？像这样：

$(function() {

  $('.accordion-tabs-minimal').each(function(index) {

    var tab = '';
    // Check, if there is a tab id in url.
    if (window.location.hash) {
      tab = $(this).find('li#tab-' + window.location.hash.substr(1));
    }

    if (tab.length) {
      tab.children('a').addClass('is-active').next().addClass('is-open').show();
    } else {
      if ($(window).width() >= 768) {
        $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
      }
    }
  });


  $('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
    if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs-minimal');
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').toggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');

      if ($(window).width() >= 768) {
        window.location.hash = '#' + $(this).parent().attr('id').substr(4);
      }
    } else {
      event.preventDefault();

      if ($(window).width() < 768) {
        $(this).removeClass('is-active');
        $(this).next().removeClass('is-open').hide();
      }
    }
  });

});

  $('.accordion-tabs-minimal').on('click', 'a', function(event) {
    if (!$(this).hasClass('tab-link')) { // make sure that user has not clicked on .tab-link itself
      var tablink = $('.accordion-tabs-minimal li > a.tab-link[href="'+$(this).attr('href')+'"]');
      if(tablink.length == 1) { // make sure current link matches a tab link
        event.preventDefault();
      	tablink.click();
      }
    }
  });

.tab-content ul {
  margin: 15px 0;
  padding-left: 30px;
  line-height: 1.5;
  list-style-position: inside;
}

.accordion-tabs-minimal .tab-header-and-content {
  list-style: none;
  display: inline;
  margin-right: 10px;
}

.accordion-tabs-minimal .tab-content {
  display: none;
  padding: 0;
  width: 100%;
  font-size: 16px;
  float: left;
}

.accordion-tabs-minimal {
  line-height: 1.5;
  padding: 0;
}

.accordion-tabs-minimal::after {
  clear: both;
  content: "";
  display: block;
}

.accordion-tabs-minimal .tab-link {
  padding: 15px 30px;
  border: 1px solid #333;
  color: #333;
  font-size: 15px;
  margin-bottom: 20px;
  display: inline-block;
}

.accordion-tabs-minimal .tab-link::after {
  clear: both;
  content: "";
  display: block;
}

.accordion-tabs-minimal .tab-link:hover,
.accordion-tabs-minimal .tab-link.is-active {
  border: 1px solid #333;
  background: #eaeaea;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- trying jQUery 3.3.1 -->

<ul class="accordion-tabs-minimal">

<li id="tab-overview" class="tab-header-and-content client-case__overview">
<a href="#overview" class="tab-link"><span class="title">Overview</span></a>

<div class="tab-content">Link to next tab: <a href="#case-story">Case Story</a></div>
</li>

<li id="tab-case-story" class="tab-header-and-content client-case__case_story">
<a href="#case-story" class="tab-link"><span class="title">Case Story</span></a>

<div class="tab-content">lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</div>
</li>

<li id="tab-timeline" class="tab-header-and-content client-case__timeline">
<a href="#timeline" class="tab-link"><span class="title">The Case</span></a>

<div class="tab-content">lorem ipsum lorem ipsumlorem<br /> ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum </div>
</li>

</ul>

如何在jQuery v.3选项卡之间进行链接？

1 个答案: