メニューアイテムがクリックされたときにdivにクラスを追加します

Question

jQueryでは最高ではありませんが、サブメニューがある場所にビデオプレーヤーを作成しようとしています。ここでは（私は、少なくとも、それを行うことができます！）フロントエンドのPICだ - ユーザーがビデオやオーディオをクリックしたときに

image here

だから、それはそれで、コンテンツと異なるのdivを表示します。

は、ここに私のHTMLマークアップです：

<ul class="vdotb"> 
    <li><a href="#video"><i class="fa fa-video-camera"></i> Video </a></li> 
    <li><a href="#audio"> <i class="fa fa-headphones"></i> Audio</a></li> 
    <li class="subs"><a href="#subscribe"><i class="fa fa-microphone"></i> Subscribe to the Podcast</a></li> 
</ul> 
<div class="tabscontnt">Video Here</div> 
<div class="tabscontnt">Audio Here</div> 
<div class="tabscontnt">Subscribe info here</div> 

そして私は、クラス.tabs-アクティブ私のCSSファイル内のブロックとして表示しています。したがって、クラス '.tabs-active'が 'tabscontnt' divに適用されると、コンテンツが表示されます。

ここで任意のヘルプやお時間を

$('ul.vdotb li a').click(

function(e) { 
    e.preventDefault(); // prevent the default action 
    e.stopPropagation; // stop the click from bubbling 
    $(this).closest('ul').find('.tabs-active').removeClass('tabs-active'); 
    $(this).parent().addClass('tabs-active'); 
}); 

おかげで...私の失敗jQueryのです！

Answer 1

対応する<div>要素の代わりに、<li>要素にクラスを適用しています。そして、それらを切り替えるには、このようなものを使用し、あなたがクリックしている<a>のhrefに一致する各<div>にIDを追加してみてください：

$('ul.vdotb li a').click(function(e){ 
    e.preventDefault(); // prevent the default action 
    e.stopPropagation; // stop the click from bubbling 

    //remove .tabs-active from any active tabs 
    $('.tabscontnt.tabs-active').removeClass('tabs-active'); 
    //add .tabs-active to the corresponding div 
    $($(this).attr('href')).addClass('tabs-active'); 
}); 

ここでフィドルです：https://jsfiddle.net/upjyv8a0/