複数の要素を切り替えるタブ

Question

私は本当にこれに固執しました。私は、タブのテキストと一緒に画像を切り替えるだけですが、画像はタブのコンテナの外側にある必要があります。私はいくつかの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(); 
}); 

Answer 1

これはあなたのコードを変更せずに行います。あなたのフィードバックを教えてください。ありがとう！

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

またはより良いまだあなたは、タブのIDになりますaタグに属性を置くことができます！

Answer 2

私はあなたの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();  
});