У меня просто есть код для простых рабочих вкладок jquery, когда я добавляю это в цикл while, работает только первый цикл, после чего ни один не работает

{amp}lt;ul class="tabs-nav"{amp}gt; {amp}lt;li class=""{amp}gt;{amp}lt;a class="active" href="#tab-1" rel="nofollow"{amp}gt;Features{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li class="tab-active"{amp}gt;{amp}lt;a href="#tab-2" rel="nofollow"{amp}gt;Details{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div class="tabs-stage"{amp}gt; {amp}lt;div id="tab-1" style="display: none;"{amp}gt; {amp}lt;?php if ( !empty($pros_extract) ) { echo '{amp}lt;ul class="c_buttels red-check-mark"{amp}gt;'; foreach ( $pros_extract as $pros ) { $yy = trim( $pros ); if ($yy) : echo '{amp}lt;li{amp}gt;'. trim( $pros ) .'{amp}lt;/li{amp}gt;'; endif; } echo '{amp}lt;/ul{amp}gt;'; } ?{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="tab-2" style="display: none;"{amp}gt; {amp}lt;?php if ( !empty($cons_extract) ) { echo '{amp}lt;ul class="c_buttels x-mark"{amp}gt;'; foreach ( $cons_extract as $cons ) { $xx = trim( $cons ); if ($xx) : echo '{amp}lt;li{amp}gt;'. $xx .'{amp}lt;/li{amp}gt;'; endif; } echo '{amp}lt;/ul{amp}gt;'; } ?{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

код JQuery

 jQuery('.tabs-nav a').on('click', function (event) { event.preventDefault(); jQuery('.tab-active').removeClass('tab-active'); jQuery(this).parent().addClass('tab-active'); jQuery('.tabs-stage div').hide(); jQuery(jQuery(this).attr('href')).show(); }); jQuery('.tabs-nav a:first').trigger('click'); 

Как я могу сделать так, чтобы каждый цикл был независимым друг от друга, спасибо.

Вы можете увидеть это здесь https://jsfiddle.net/1h946zw7/

Попробуйте каждую () функцию:

 jQuery('.tabs-nav').each( function() { jQuery(this).children('a:first).trigger('click'); }); с jQuery('.tabs-nav').each( function() { jQuery(this).children('a:first).trigger('click'); }); 

Это именно то, что мне нужно, который не использует уникальный идентификатор

 {amp}lt;div class="tabmenu"{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#" class="active"{amp}gt;Tab 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;Tab 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;Tab 3{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;Tab 4{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;This is a very simple jQuery tabbed navigation.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;This can contain anything.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;Like photos:{amp}lt;/p{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;div style="width:200px;height:200px;background:#0f0;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;Or videos:{amp}lt;/p{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;div style="width:400px;height:400px;background:#f00;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="tabmenu"{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#" class="active"{amp}gt;Tab 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;Tab 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;Tab 3{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#"{amp}gt;Tab 4{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;This is a very simple jQuery tabbed navigation.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;This can contain anything.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;Like photos:{amp}lt;/p{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;div style="width:200px;height:200px;background:#0f0;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;Or videos:{amp}lt;/p{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;div style="width:400px;height:400px;background:#f00;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Код jQuery:

 $('.tabmenu div').each(function(){ $(this).children('div:first').show(); }); $('.tabmenu ul li').click(function() { var $self = $(this); var $nav = $(this).parent(); var $tabCtl = $nav.parent(); $nav.find('a').removeClass("active"); $self.find('a').addClass("active"); $tabCtl.children('div').children('div').hide(); var indexer = $self.index(); //gets the current index of (this) which is #nav li $tabCtl.children('div').children('div:eq('   indexer   ')').fadeIn(); //uses whatever index the link has to open the corresponding box }); 

ИСТОЧНИК: http://jsfiddle.net/daveSalomon/R85tE/339/

Передайте уникальный идентификатор в цикле. Смотрите ниже код

 {amp}lt;?php $i=1; while(put your condition here) { ?{amp}gt; {amp}lt;ul class="tabs-nav"{amp}gt; {amp}lt;li class=""{amp}gt;{amp}lt;a class="active" href="#tab-{amp}lt;?php echo $i;?{amp}gt;" rel="nofollow"{amp}gt;Features{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li class="tab-active"{amp}gt;{amp}lt;a href="#tab-{amp}lt;?php echo $i 1;?{amp}gt;" rel="nofollow"{amp}gt;Details{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div class="tabs-stage"{amp}gt; {amp}lt;div id="tab-{amp}lt;?php echo $i;?{amp}gt;" style="display: none;"{amp}gt; {amp}lt;?php if ( !empty($pros_extract) ) { echo '{amp}lt;ul class="c_buttels red-check-mark"{amp}gt;'; foreach ( $pros_extract as $pros ) { $yy = trim( $pros ); if ($yy) : echo '{amp}lt;li{amp}gt;'. trim( $pros ) .'{amp}lt;/li{amp}gt;'; endif; } echo '{amp}lt;/ul{amp}gt;'; } ?{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="tab-{amp}lt;?php echo $i 1;?{amp}gt;" style="display: none;"{amp}gt; {amp}lt;?php if ( !empty($cons_extract) ) { echo '{amp}lt;ul class="c_buttels x-mark"{amp}gt;'; foreach ( $cons_extract as $cons ) { $xx = trim( $cons ); if ($xx) : echo '{amp}lt;li{amp}gt;'. $xx .'{amp}lt;/li{amp}gt;'; endif; } echo '{amp}lt;/ul{amp}gt;'; } ?{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;?php $i=$i 2; } ?{amp}gt;