在每个函数中使用jQuery选项卡

Question

我有这个脚本，所以我可以很容易地制作标签。但我不能在同一页面上有两个，三个，四个等标签功能。我试图将每个函数包装成函数，但我只是不为我工作。选项卡同时在两行上更改：/

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

我也想要这样：如果你点击选中的标签，我希望它不像手风琴那样活跃。

标记在这里：

(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()课程。我想这就是你要找的东西。

＆＃13;

＆＃13;

(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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;