Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design:
Upon clicking on 'video' or 'audio', a distinct div containing relevant content should be displayed.
Below is the HTML structure:
<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 Content Here</div>
<div class="tabscontnt">Audio Content Here</div>
<div class="tabscontnt">Subscription Info Here</div>
The CSS stylesheet contains a .tabs-active class set to display as block, which shows the content when applied to the 'tabscontnt' div.
Provided below is an unsuccessful attempt at jQuery implementation...
$('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');
});
Appreciate any guidance and support! Thank you!