javascript - 单击菜单项时将类添加到 div

Question

我不是最擅长 jQuery 的，但我尝试创建一个视频播放器，其中有一个子菜单，您可以单击以显示不同的内容选项。这是前端的图片(至少我可以做到!)-

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-active 类在我的 css 文件中显示为一个 block 。因此，当类“.tabs-active”应用于“tabscontnt”div 时，内容就会显示出来。

这是我失败的 jQuery...

$('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');
});

感谢您的帮助和宝贵时间!

Answer 1

您正在将类(class)应用于 <li>元素，而不是相应的 <div>元素。尝试为每个 <div> 添加一个 ID匹配 href的 <a>你点击，然后使用类似这样的东西来切换它们:

$('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');
});

这是一个 fiddle :https://jsfiddle.net/upjyv8a0/