文章/答案/技术大牛

发布

问Jquery选项卡不呈现
EN

Stack Overflow用户

提问于 2012-03-16 21:18:53

回答 2查看 273关注 0票数 0

我正在使用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;
});
});

javascript

jquery

tabs

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-03-28 03:03:16

好吧，我想通了。我将div ID改为独立的。所以第一个div变成了lecimgtabs，下一个变成了secimgtabs。我相信你可以用相同的I来做这件事，但这对我来说是有效的。

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没有问题。

票数 0

Stack Overflow用户

发布于 2012-03-16 21:21:42

有两个div具有相同的ID：ecimgtabs，因此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>

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9738001

复制

相似问题

问Jquery选项卡不呈现
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery选项卡不呈现EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery选项卡不呈现
EN