使用jquery Click功能的多个/嵌套选项卡不起作用

Question

我正在使用同一页上的多个标签页/嵌套标签页，我的代码运行正常current类也添加了data-target属性，也可以正常工作。问题是单击功能可能是我没有正确定位元素。我使用这个children()的原因是因为我在同一页面上有多个/嵌套的标签页，有人可以建议我，这里的标签页没有更改，点击功能无法正常工作

function atscTabs() {
  $('.at-tabs').each(function(index, item) {
    var tab_item = $(this).find('.at-tab__item');
    var tab_item_title = $(this).find('.at-title__text');
    var tab_content = $(this).find('.at-content__item');

    tab_content.hide();
    //adding data attribute 
    tab_item_title.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $(tab_item[0], tab_item_title[0]).addClass('current');
    $(tab_content[0]).show();
    console.log('test');
    //Display current tab content
    $(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {

      //debugger;
      $(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-title__text').addClass('current');
      $(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
      $(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
      ele.stopPropagation();
    });
  });
}

atscTabs();

.at-tab__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tab-wrapper {
  display: flex;
  padding: 28px 0px;
}

.at-title__text {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current .at-title__text {
  color: #fff;
}

.at-tab__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-content-wrapper {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
  <div>
    <div class="at-tab-wrapper">
      <div class="at-tab__item">
        <a class="at-tab__item_title" href="#">
          <div class="at-title-wrapper">
            <div class="at-ititle-wrapper">
              <span class="at-title__text">Tab #1</span>
            </div>
            <span class="at-title__subtitle">Sub Title</span>
          </div>
        </a>
      </div>
      <div class="at-tab__item">
        <a class="at-tab__item_title" href="#">
          <div class="at-title-wrapper">
            <div class="at-ititle-wrapper">
              <span class="at-title__text">Tab #2</span>
            </div>
            <span class="at-title__subtitle">Sub Title</span>
          </div>
        </a>
      </div>
      <div class="at-tab__item">
        <a class="at-tab__item_title" href="#">
          <div class="at-title-wrapper">
            <div class="at-ititle-wrapper">
              <span class="at-title__text">Tab #3</span>
            </div>
            <span class="at-title__subtitle">Sub Title</span>
          </div>
        </a>
      </div>
    </div>
  </div>


  <div class="at-content-wrapper">

    <div class="at-content__item">
      <p>Tab Content dfdfd</p>
    </div>
    <div class="at-content__item">
      <p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
    </div>
    <div class="at-content__item">
      <p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
    </div>

  </div>

</div>

Answer 1

您好，我已解决您的点击问题

function atscTabs() {
  $('.at-tabs').each(function(index, item) {
    var tab_item = $(this).find('.at-tab__item');
    var tab_item_title = $(this).find('.at-title__text');
    var tab_content = $(this).find('.at-content__item');

    tab_content.hide();
    //adding data attribute 
    tab_item_title.each(function(idx, ele) {
      $(this).attr('data-target', idx)
    });
    $(tab_item[0], tab_item_title[0]).addClass('current');
    $(tab_content[0]).show();
    console.log('test');
    //Display current tab content
    $('.at-tab__item').click(function(ele) {

      //debugger;
    $('.at-tab__item').removeClass('current');
      $(this).addClass('current');
      $(this).find('.at-title__text').addClass('current');
      $(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
      $(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
      ele.stopPropagation();
    });
  });
}

atscTabs();

.at-tab__item.current {
  padding: 10px 20px;
  background-color: #3c98ff;
}

.at-tab-wrapper {
  display: flex;
  padding: 28px 0px;
}

.at-title__text {
  text-decoration: none;
  font-size: 18px;
  color: black;
}

.current .at-title__text {
  color: #fff;
}

.at-tab__item {
  padding: 10px 20px;
  margin: 0 10px;
  background: #e1e1e1;
}

.at-content-wrapper {
  font-size: 16px;
  padding: 25px;
  background: #e1e1e1;
}

hr {
  height: 5px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
  <div>
    <div class="at-tab-wrapper">
      <div class="at-tab__item">
        <a class="at-tab__item_title" href="#">
          <div class="at-title-wrapper">
            <div class="at-ititle-wrapper">
              <span class="at-title__text">Tab #1</span>
            </div>
            <span class="at-title__subtitle">Sub Title</span>
          </div>
        </a>
      </div>
      <div class="at-tab__item">
        <a class="at-tab__item_title" href="#">
          <div class="at-title-wrapper">
            <div class="at-ititle-wrapper">
              <span class="at-title__text">Tab #2</span>
            </div>
            <span class="at-title__subtitle">Sub Title</span>
          </div>
        </a>
      </div>
      <div class="at-tab__item">
        <a class="at-tab__item_title" href="#">
          <div class="at-title-wrapper">
            <div class="at-ititle-wrapper">
              <span class="at-title__text">Tab #3</span>
            </div>
            <span class="at-title__subtitle">Sub Title</span>
          </div>
        </a>
      </div>
    </div>
  </div>


  <div class="at-content-wrapper">

    <div class="at-content__item">
      <p>Tab Content dfdfd</p>
    </div>
    <div class="at-content__item">
      <p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
    </div>
    <div class="at-content__item">
      <p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
    </div>

  </div>

</div>