Question

我真的坚持这个，我需要的是将图像与标签文本一起切换，但图像应该在标签容器之外。我制作了一些jQuery代码，但是如果我想添加更多选项卡并且功能重复，它就不灵活了，这看起来也不太好。

是否有一些选项，可能是一个功能，可以检查cliked标签的数量是否与图片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();
});

Answer 1

我已修改了您的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();    
});

Answer 2

这样做无需更改任何代码。让我知道您的反馈。谢谢！

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

或者更好的是，你可以在a标签上放置一个属性，该标签将成为标签的ID！

切换多个元素的标签

2 个答案: