Jquery Переместить пользовательские вкладки к следующему

Question

У меня есть несколько основных вкладок html / css, и я хочу переместить вкладку в следующую, щелкнув ссылку внизу каждой вкладки.

HTML

 <ul class="tabs">
   <li class="active">
      <a href="#">Explainer (2mins)</a>
      <div class="content">
         <div id="Video" class="tabcontent">
            <div class="coltab">
               content A
            </div>
            <h4>Next tab: View Some Sample Lessons</h4>
         </div>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Sample Lessons</a>
      <div class="content coltab">
         <div>
            Content B
         </div>
         <h4> Next tab: See the Your Offer. </h4>
      </div>
   </li>

</ul>

Jquery для этого

$(document).ready(function(){
    $(".tabs").after("<div class='tabContent'></div>");

    $(".tabs li>a").on("click", function(e){
        var $tab = $(this).parent();
        var tabIndex = $tab.index();

        $tab.parent("ul").find("li").removeClass("active");
        $tab.addClass("active");

        var tabContent = $tab.find(">div").clone(true);
        $(".tabContent").html(tabContent);
        e.preventDefault();
    });

});

теперь он работает нормально, когда я нажимаю на вкладку его изменения.

Живая демоверсия

$(document).ready(function(){
	$(".tabs").after("<div class='tabContent'></div>");
	
	$(".tabs li>a").on("click", function(e){
		var $tab = $(this).parent();
		var tabIndex = $tab.index();
		
		$tab.parent("ul").find("li").removeClass("active");
		$tab.addClass("active");
		
		var tabContent = $tab.find(">div").clone(true);
		$(".tabContent").html(tabContent);
		e.preventDefault();
	});
	
});

.coltab{
	height: 51vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.tabs {
	margin: 0;
	padding: 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	overflow: hidden;
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
 .tabs li {
	display: table-cell;
	margin: 0;
	padding: 0;
	list-style: none;
	border-right: 1px solid #000;
}
.tabs li>a {
	display: block;
	font-weight: bold;
	text-align: center;
	padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
	background-color: #D3D3D3;
}

.tabs li .content {
	display: none;
}

.tabContent {
	padding: 15px 15px 0px 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
   <li class="active">
      <a href="#">Explainer (2mins)</a>
      <div class="content">
         <div id="Video" class="tabcontent">
            <div class="coltab">
               content A
            </div>
            <h4>Next tab: View Some Sample Lessons</h4>
         </div>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Sample Lessons</a>
      <div class="content coltab">
         <div>
            Content B
         </div>
         <h4> Next tab: See the Your Offer. </h4>
      </div>
   </li>
   <li>
      <a href="#">Special Offer</a>
      <div class="content">
         <div class="coltab">
            Content C
         </div>
         <h4>Next tab: To Register and Subscribe>>></h4>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Subscribe</a>
      <div class="content coltab">
        <div>
         Content D
      </div>
        <div>
      <h4>Next tab: To Request a callback</h4>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Request a Callback</a>
      <div class="content coltab">
         <div>
            Content E
         </div>
         <h4>Next tab: Reviews</h4>
      </div>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Reviews</a>
      <div class="content">
         <div>
            Content F
         </div>
         <h4>Back to first tab</h4>
      </div>
      </div>
      </div>
   </li>
</ul>

Answer 1

Вы можете добавить этот код:

$("h4").click(function(){
  var activeTab = $("ul.tabs > li.active");
  var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
  nextTab.find("a").trigger("click")
});

это позволит вам нажать на h4 aka next и перейти к следующему контенту

Рабочая демонстрация

$(document).ready(function(){
	$(".tabs").after("<div class='tabContent'></div>");
	
	$(".tabs li>a").on("click", function(e){
		var $tab = $(this).parent();
		var tabIndex = $tab.index();
		
		$tab.parent("ul").find("li").removeClass("active");
		$tab.addClass("active");
		
		var tabContent = $tab.find(">div").clone(true);
		$(".tabContent").html(tabContent);
		e.preventDefault();
	});
	
  $("h4").click(function(){
    var activeTab = $("ul.tabs > li.active");
    var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
    nextTab.find("a").trigger("click")
  });
});

.coltab{
	height: 51vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.tabs {
	margin: 0;
	padding: 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	overflow: hidden;
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
 .tabs li {
	display: table-cell;
	margin: 0;
	padding: 0;
	list-style: none;
	border-right: 1px solid #000;
}
.tabs li>a {
	display: block;
	font-weight: bold;
	text-align: center;
	padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
	background-color: #D3D3D3;
}

.tabs li .content {
	display: none;
}

.tabContent {
	padding: 15px 15px 0px 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
   <li class="active">
      <a href="#">Explainer (2mins)</a>
      <div class="content">
         <div id="Video" class="tabcontent">
            <div class="coltab">
               content A
            </div>
            <h4>Next tab: View Some Sample Lessons</h4>
         </div>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Sample Lessons</a>
      <div class="content coltab">
         <div>
            Content B
         </div>
         <h4> Next tab: See the Your Offer. </h4>
      </div>
   </li>
   <li>
      <a href="#">Special Offer</a>
      <div class="content">
         <div class="coltab">
            Content C
         </div>
         <h4>Next tab: To Register and Subscribe>>></h4>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Subscribe</a>
      <div class="content coltab">
        <div>
         Content D
      </div>
        <div>
      <h4>Next tab: To Request a callback</h4>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Request a Callback</a>
      <div class="content coltab">
         <div>
            Content E
         </div>
         <h4>Next tab: Reviews</h4>
      </div>
      </div>
      </div>
   </li>
   <li>
      <a href="#">Reviews</a>
      <div class="content">
         <div>
            Content F
         </div>
         <h4>Back to first tab</h4>
      </div>
      </div>
      </div>
   </li>
</ul>