[英]Add class to div, when menu item is clicked
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. 我对jQuery并不是最好的选择,但是尝试创建一个带有子菜单的视频播放器,然后单击以显示不同的内容选项。 Here's a pic of the frontend (I can do that, at least!) -
这是前端的图片(至少我可以做到!)-
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. 我的css文件中有一个.tabs-active类,显示为块。 So when the class '.tabs-active' is applied to the 'tabscontnt' div, the content displays.
因此,当将“ .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! 感谢您的帮助和您的宝贵时间!
You're applying the class to the <li>
element, instead of the corresponding <div>
element. 您正在将类应用于
<li>
元素,而不是相应的<div>
元素。 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: 尝试为每个与您单击的
<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');
});
Here's a Fiddle: https://jsfiddle.net/upjyv8a0/ 这是一个小提琴: https : //jsfiddle.net/upjyv8a0/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.