Jquery 탭이 렌더링되지 않습니다.

Question

jquery를 사용하여 페이지에 두 세트의 탭을 만듭니다. 클릭하면 탭에 이미지가 표시됩니다. 첫 번째 탭 집합은 잘 렌더링되지만 두 번째 탭 집합은 렌더링되지 않습니다. jQuery를 만 DOM에서 첫 번째를 인식 할 수 있도록, ecimgtabs :

이

<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 ID를 별도로 변경했습니다. 그래서 첫번째 div는 lecimgtabs와 다음 한 secimgtabs로 바뀌 었습니다. 난 당신이 동일한 ID를 함께 할 수있는 확신하지만이 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를 가진 두 개의 div의이 여기에 HTML입니다. 클래스

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