切换多个元素的选项卡

我确实坚持这一点，我需要的是将图像与选项卡文本切换在一起，但图像应该位于选项卡容器之外。我做了一些jQuery代码，但是如果我想添加更多的选项卡并且功能是重复的，那么它并不灵活，这也看起来不太好。切换多个元素的选项卡

是否有一些选项，可能是一个函数，它会检查粘贴选项卡的数量是否与图像ID匹配，并根据此数字切换图像。

请帮助:) 的代码示例 - http://codepen.io/DeoThemes/pen/EyAjVA

的jQuery：

$('#tabs-img-1').show(); 

$("a[href='#tab-1']").on('click', function() {  
    $('.tabs-img').hide(); 
    $('#tabs-img-1').show(); 
}); 

$("a[href='#tab-2']").on('click', function() { 
    $('.tabs-img').hide(); 
    $('#tabs-img-2').show(); 
}); 

$("a[href='#tab-3']").on('click', function() { 
    $('.tabs-img').hide(); 
    $('#tabs-img-3').show(); 
}); 

$("a[href='#tab-4']").on('click', function() { 
    $('.tabs-img').hide(); 
    $('#tabs-img-4').show(); 
}); 

$("a[href='#tab-5']").on('click', function() { 
    $('.tabs-img').hide(); 
    $('#tabs-img-5').show(); 
});

来源

2016-08-12 Alexander

这将在不改变任何代码的执行。让我知道你的反馈。谢谢！

$('.tabs a[data-toggle="tab"]').on('click', function() { 
    $('.tabs-img').hide(); 
    $('#tabs-img-' + $(this).attr('href').split('-')[1]).show(); 
});

或者更好的是，你可以放置在a标签的属性，这将是标签的ID！

来源

2016-08-12 17:13:58 kukkuz

谢谢，这实际上是工作:)你能解释一下[1]的含义吗？ jQuery将使用数量增加1？ – Alexander

我用'-'字符'''分割'a'标签的href，例如'tab-3'，并选择索引为'1'的元素，在这种情况下是'3'... – kukkuz

我已经编辑好Codepen。

添加自定义属性到锚链接：

<a href="#tab-1" data-toggle="tab" imgId="#tabs-img-1">Business Oriented</a>

，然后改变你的脚本是：

$("ul.nav-tabs li a").on('click', function() {  
    $('.tabs-img').hide(); 
    $($(this).attr('imgId')).show();  
});

来源

2016-08-12 17:08:03 Arif

切换多个元素的选项卡

回答

相关问题