Question

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

因此，当用户点击视频或音频时，它会显示包含内容的不同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>

我的css文件中有类.tabs-active显示为块。因此，当'.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

您将该类应用于<li>元素，而不是相应的<div>元素。尝试为每个与您点击的<div>的{{1}}匹配的href添加ID，然后使用以下内容进行切换：

<a>

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

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

1 个答案: