单击菜单项时，将类添加到div

I'm not the best with jQuery, but trying to create a video player where there is a sub menu, and you can click to display different content options. Here's a pic of the frontend (I can do that, at least!) -

我不是最好的jQuery,但尝试创建一个有子菜单的视频播放器,你可以点击显示不同的内容选项。这是前端的照片(我至少可以这样做!) -

image here

So when a user clicks to video or audio, it displays the different div with content in it.

因此,当用户点击视频或音频时,它会显示包含内容的不同div。

Here's my html markup:

这是我的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>

And I have the class .tabs-active in my css file displaying as a block. So when the class '.tabs-active' is applied to the 'tabscontnt' div, the content displays.

我在我的css文件中显示了.tabs-active类,显示为一个块。因此,当'.tabs-active'类应用于'tabscontnt'div时,将显示内容。

Here's my failed jQuery...

这是我失败的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');
});

Thanks for any help and your time!

感谢您的帮助和时间!

1 个解决方案

#1

You're applying the class to the <li> element, instead of the corresponding <div> element. Try adding an ID to each <div> that matches the href of the <a> you're clicking on, then use something like this to toggle them:

您将该类应用于

元素,而不是相应的

元素。尝试为每个

添加一个ID,该ID与您点击的的href相匹配,然后使用类似的东西来切换它们:

元素,而不是相应的元素。尝试为每个添加一个ID,该ID与您点击的href相匹配,然后使用类似的东西来切换它们:

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

Here's a Fiddle: https://jsfiddle.net/upjyv8a0/

这是一个小提琴:https://jsfiddle.net/upjyv8a0/

#1