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 с одинаковым идентификатором: 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;
});
});

Answer 2

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

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

@ Кайл, с css проблем не было.