Javascript Jquery选项卡未呈现
我使用jquery在一个页面上创建两组选项卡。单击这些选项卡时会显示图像。第一组选项卡渲染良好,但第二组选项卡不渲染。以下是html:Javascript Jquery选项卡未呈现,javascript,jquery,tabs,Javascript,Jquery,Tabs,我使用jquery在一个页面上创建两组选项卡。单击这些选项卡时会显示图像。第一组选项卡渲染良好,但第二组选项卡不渲染。以下是html: <div id="ecimgtabs"> <ul> <li id="first"><a href="#ltec1">IMAGEI</a></li> <li id="second"><a href="#ltec2">IMAGEII</a></li>
<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>
您有两个ID相同的div:
ecimgtab
,因此jQuery将只识别DOM中的第一个div。试着换一门课
<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>
好的,我能弄明白。我将div id更改为单独的。因此,第一组改为lecimgtabs,下一组改为secimgtabs。我相信您可以使用相同的ID进行操作,但这对我很有效。以下是更新的代码:
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没有问题。缩进帮助其他人阅读您的代码。kyle,Erik,所以我将div更改为类,下面是正在发生的事情。当页面加载时,第一组选项卡将完全加载图像并选择一个图像。第二组选项卡仅加载选项卡,未显示或选择任何图像。抱歉,无意中按enter键并提交了未完成的注释。无论如何,当我单击第二组选项卡时,第二组图像加载,第一组选项卡下的图像消失。现在我有一个部分加载的第一组和完全加载的第二组。当我单击部分加载的第一组时,会发生相反的情况,依此类推。
$(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;
});
});
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;
});
});