Javascript 单击菜单项时,将类添加到div
我不是jQuery的高手,但我正在尝试创建一个视频播放器,其中有一个子菜单,您可以单击以显示不同的内容选项。这是前端的一张照片(至少我能做到!) 因此,当用户单击视频或音频时,它会显示包含内容的不同div 以下是我的html标记:Javascript 单击菜单项时,将类添加到div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我不是jQuery的高手,但我正在尝试创建一个视频播放器,其中有一个子菜单,您可以单击以显示不同的内容选项。这是前端的一张照片(至少我能做到!) 因此,当用户单击视频或音频时,它会显示包含内容的不同div 以下是我的html标记: <ul class="vdotb"> <li><a href="#video"><i class="fa fa-video-camera"></i> Video </a></li&
<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>
谢谢你的帮助和时间 您将类应用于
元素,而不是相应的
元素。尝试向每个
添加一个ID,该ID与要将类应用于
元素的href
相匹配,而不是相应的
元素。尝试为每个与的href
匹配的
添加一个ID,您真是太棒了!工作得很有魅力!你太棒了!工作得很有魅力!
$('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');
});
$('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');
});