JQuery вкладки не отображаются

Question

Я использую jquery для создания двух наборов вкладок на странице. На вкладках отображаются изображения при нажатии. Первый набор вкладок отображается отлично, но второй набор вкладок не отображается. Вот HTML:

<div id="ecimgtabs"> 
<ul> 
<li id="first"><a href="#ltec1">IMAGEI</a></li> 
<li id="second"><a href="#ltec2">IMAGEII</a></li> 
</ul> 
<div id="ltec1"> 
<img src="path"></img> 
</div> 
<div id="ltec2"> 
<img src="path"></img> 
</div> 
</div> 


<div id="ecimgtabs"> 
<ul> 
<li id="first"><a href="#stec1">IMAGEI </a></li> 
<li id="second"><a href="#stec2">IMAGEII </a></li> 
</ul> 
<div id="stec1"> 
<img src="path"></img> 
</div> 
<div id="stec2"> 
<img src="path"></img> 
</div> 
</div> 

Вот JQuery скрипт:

$(document).ready(function(){ 
var tabdiv = $('#ecimgtabs div'); 
$('#ecimgtabs div').hide(); 
$('#ecimgtabs div:first').show(); 
$('#ecimgtabs ul li:first').addClass('selected'); 

$('#ecimgtabs ul li a').click(function(){ 
$('#ecimgtabs ul li').removeClass('selected'); 
$(this).parent().addClass('selected'); 
var currentTab = $(this).attr('href'); 
$('#ecimgtabs div').hide(); 
$(currentTab).show(); 
return false; 
}); 
}); 

Answer 1

Хорошо, я был в состоянии понять это. Я изменил идентификаторы div, чтобы они были отдельными. Таким образом, первый div изменился на lecimgtabs и следующий на secimgtabs. Я уверен, что вы могли бы сделать это с одинаковыми идентификаторами, но это работало для обновленного кода me.Here в:

jQuery(document).ready(function() 
{ 
jQuery('.lecimgtabs div:odd').hide(); 
jQuery('.secimgtabs div:odd').hide(); 
jQuery('.lecimgtabs ul li:even').addClass('selected'); 
jQuery('.secimgtabs ul li:even').addClass('selected'); 

jQuery('.lecimgtabs ul li a').click(function(){ 
jQuery('.lecimgtabs ul li').removeClass('selected'); 
jQuery(this).parent().addClass('selected'); 
var currentTab = jQuery(this).attr('href'); 
if(currentTab=='#ltec2') 
{ 
    jQuery('.lecimgtabs div#ltec1').hide(); 
} 
else 
{ 
    jQuery('.lecimgtabs div#ltec2').hide(); 
} 

jQuery(currentTab).show(); 
return false; 
}); 


jQuery('.secimgtabs ul li a').click(function(){ 
jQuery('.secimgtabs ul li').removeClass('selected'); 
jQuery(this).parent().addClass('selected'); 
var currentTab = jQuery(this).attr('href'); 
if(currentTab=='#stec2') 
{ 
    jQuery('.secimgtabs div#stec1').hide(); 
} 
else 
{ 
    jQuery('.secimgtabs div#stec2').hide(); 
} 

jQuery(currentTab).show(); 
return false; 
}); 
}); 

@kyle не было никакой проблемы с CSS.

Answer 2

У вас есть две дивы с тем же ID: ecimgtabs, так JQuery будет распознавать только первый в DOM. Попробуйте переключиться на класс

<div class="ecimgtabs"> 
<ul> 
<li id="first"><a href="#ltec1">IMAGEI</a></li> 
<li id="second"><a href="#ltec2">IMAGEII</a></li> 
</ul> 
<div id="ltec1"> 
<img src="path"></img> 
</div> 
<div id="ltec2"> 
<img src="path"></img> 
</div> 
</div> 


<div class="ecimgtabs"> 
<ul> 
<li id="first"><a href="#stec1">IMAGEI </a></li> 
<li id="second"><a href="#stec2">IMAGEII </a></li> 
</ul> 
<div id="stec1"> 
<img src="path"></img> 
</div> 
<div id="stec2"> 
<img src="path"></img> 
</div> 
</div> 

Jquery:

$(document).ready(function(){ 
var tabdiv = $('#ecimgtabs div'); 
$('.ecimgtabs div').hide(); 
$('.ecimgtabs div:first').show(); 
$('.ecimgtabs ul li:first').addClass('selected'); 

$('.ecimgtabs ul li a').click(function(){ 
$('.ecimgtabs ul li').removeClass('selected'); 
$(this).parent().addClass('selected'); 
var currentTab = $(this).attr('href'); 
$('.ecimgtabs div').hide(); 
$(currentTab).show(); 
return false; 
}); 
});