javascript - 在每个函数中使用 jQuery Tabs

Question

我有这个脚本，所以我可以很容易地制作标签。但我不能在同一页面上有两个、三个、四个等等选项卡功能。我试图包装成一个 each.function，但我就是不适合我。选项卡同时在两行上更改:/

我使用 WordPress，所以 HTML 标记有点长，所以我创建了一个 Codepen .

我也想要这个:如果您单击选定的选项卡，我希望它不活动，就像 Accordion 一样。

此处标记:

(function($) {
	$('.section .row').each(function() {
		$(this).find('.nav_wrap .tab').on('click', function() { 
			show_content($(this).index());
		});
	});

	
	show_content(99);  // choose 0 to start with first tab
	
	function show_content(index) {
		$('.row').each(function() {
			// Make the content visible
			$(this).find('.content_wrap .content.visible').removeClass('visible');
			$(this).find('.content_wrap .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
		
			// Set the tab to selected
			$(this).find('.nav_wrap .tab.selected').removeClass('selected');
			$(this).find('.nav_wrap .tab:nth-of-type(' + (index + 1) + ')').addClass('selected');
		});
	}
	
	
  })(jQuery); 

.row {
  background: lightblue;
  margin-bottom: 80px;
}
.nav_wrap, .content_wrap {
  display: flex;
}
.tab, .content {
  padding: 20px;
}
.tab {
  cursor: pointer;
}
.tab:hover,
.tab.selected {
  background:pink;
}
.content_wrap .content {
    display: none;
}
.content_wrap .content.visible {
    display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section">
    <div class="row">
        <div class="nav_wrap">
            <div class="tab">Tab 1</div>
            <div class="tab">Tab 2</div>
            <div class="tab">Tab 3</div>
        </div>
        <div class="content_wrap">
            <div class="content">Tab 1 content goes here</div>
            <div class="content">Tab 2 content goes here</div>
            <div class="content">Tab 3 content goes here</div>
        </div>
    </div>
    <div class="row">
        <div class="nav_wrap">
            <div class="tab">Tab 1</div>
            <div class="tab">Tab 2</div>
            <div class="tab">Tab 3</div>
        </div>
        <div class="content_wrap">
            <div class="content">Tab 1 content goes here</div>
            <div class="content">Tab 2 content goes here</div>
            <div class="content">Tab 3 content goes here</div>
        </div>
    </div>
</div>

Answer 1

找到被点击元素的索引并添加类到下一个content基于点击元素索引的点击元素。在这里，我已将您上面的代码更新为一个函数。我检查了点击是否有 selected类与否 hasClass()方法。我想这就是您要找的。

(function($) {
  $('.nav_wrap .tab').on('click', function() {
    if(!$(this).hasClass('selected')) {
      $(this).parent().find('.selected').removeClass('selected');
    }
    $(this).toggleClass('selected');
    if(!$(this).parent().next().find('.content').eq($(this).index()).hasClass('visible')) {
      $(this).parent().next().find('.visible').removeClass('visible');
    }  $(this).parent().next().find('.content').eq($(this).index()).toggleClass('visible');
	});	
  })(jQuery);

.row {
  background: lightblue;
  margin-bottom: 80px;
}
.nav_wrap, .content_wrap {
  display: flex;
}
.tab, .content {
  padding: 20px;
}
.tab {
  cursor: pointer;
}
.tab:hover,
.tab.selected {
  background:pink;
}
.content_wrap .content {
    display: none;
}
.content_wrap .content.visible {
    display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section">
    <div class="row">
        <div class="nav_wrap">
            <div class="tab">Tab 1</div>
            <div class="tab">Tab 2</div>
            <div class="tab">Tab 3</div>
        </div>
        <div class="content_wrap">
            <div class="content">Tab 1 content goes here</div>
            <div class="content">Tab 2 content goes here</div>
            <div class="content">Tab 3 content goes here</div>
        </div>
    </div>
    <div class="row">
        <div class="nav_wrap">
            <div class="tab">Tab 1</div>
            <div class="tab">Tab 2</div>
            <div class="tab">Tab 3</div>
        </div>
        <div class="content_wrap">
            <div class="content">Tab 1 content goes here</div>
            <div class="content">Tab 2 content goes here</div>
            <div class="content">Tab 3 content goes here</div>
        </div>
    </div>
</div>