I have a menu with nested list items. When you click on the li the content shows by adding current class and removing it elsewhere. The problem comes into play when you click on a nested li. When nested li are clicked the content does not show. Can anyone give me some much needed guidance as I am new to using jquery. I tried to narrow down the extra code so it is easier to view. Thanks
<ul class="profile_manager_nav_items_list">
<li class="profile_introduction_tab current_profile_manager_tab" data-tab="profile_introduction" role="tab" rel="profile_introduction_tab"><input id="introduction_profile_input" type="checkbox" name="tabs" checked hidden/>
<label for="introduction_profile_input"><img src="images/icon_profile_introduction.png"><span class="fa fr"></span>Profile Introduction</label></li>
<li class="personal_aspects_tab" data-tab="personal_aspects" role="tab" rel="personal_aspects_tab"><input id="personal_aspects_profile_input" type="checkbox" name="tabs" hidden/>
<label for="personal_aspects_profile_input"><img src="images/icon_personalaspects.png"><span class="fa fr"></span>Personal Aspects</label></li>
<li class="location_profile_tab" data-tab="location_profile" role="tab" rel="location_profile_tab"><input id="location_profile_input" type="checkbox" name="tabs" hidden/>
<label for="location_profile_input"><img src="images/icon_location.png"><span class="fa"></span>Your Location(s)</label></li>
<li class="interview_tab" data-tab="interview" role="tab" rel="interview_tab"><input id="interview_input" type="checkbox" name="tabs" hidden/>
<label for="personal_interview_input"><img src="images/icon_interview.png"><span class="fa fr"></span>Interview</label></li>
<li class="quizzes_profile_tab" data-tab="quizzes_profile" role="tab" rel="quizzes_profile_tab"><input id="quizzes_profile_input" type="checkbox" name="tabs" hidden/>
<label for="quizzes_profile_input"><img src="images/icon_quiz.png"><span class="fa fr angle_right_font fa-angle-right"></span>Quizzes</label>
<ul class="quizzes_group_sub_items">
<li class="quiz1_tab" data-tab="quiz1" role="tab" rel="quiz1_tab"><input id="quiz1_input" type="checkbox" name="tabs2" hidden/>
<label for="quiz1_input"><i class="fa"><img src="images/icon_quiz1.png"></i>Quiz1</label></li>
<li class="quiz2_tab" data-tab="quiz2" role="tab" rel="quiz2_tab"><input id="quiz2_input" type="checkbox" name="tabs2" hidden/>
<label for="quiz2_input"><i class="fa"><img src="images/icon_quiz2.png"></i>Quiz2</label></li>
</ul>
</li>
$(document).ready(function() {
$('.profile_manager_nav_items_list li').click(function() {
var tab_id = $(this).attr('data-tab');
$('.profile_manager_nav_items_list li').removeClass('current_profile_manager_tab');
$('.profile_manager_tab_content').removeClass('current_profile_manager_tab');
$(this).addClass('current_profile_manager_tab');
$("#"+tab_id).addClass('current_profile_manager_tab');
});
});
Assuming I've understood your question correctly, you can ensure that only the specific list item has the class applied by using the stopPropagation method of the default Event object. Example below:
$(document).ready(function() {
$('.profile_manager_nav_items_list li').click(function(evt) {
evt.stopPropagation(); // stop the event bubbling
var tab_id = $(this).attr('data-tab');
$('.profile_manager_nav_items_list li').removeClass('current_profile_manager_tab');
$('.profile_manager_tab_content').removeClass('current_profile_manager_tab');
$(this).addClass('current_profile_manager_tab');
$("#"+tab_id).addClass('current_profile_manager_tab');
});
});.current_profile_manager_tab {
background-color: #808080;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="profile_manager_nav_items_list">
<li class="profile_introduction_tab current_profile_manager_tab" data-tab="profile_introduction" role="tab" rel="profile_introduction_tab"><input id="introduction_profile_input" type="checkbox" name="tabs" checked hidden/>
<label for="introduction_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr"></span>Profile Introduction</label></li>
<li class="personal_aspects_tab" data-tab="personal_aspects" role="tab" rel="personal_aspects_tab"><input id="personal_aspects_profile_input" type="checkbox" name="tabs" hidden/>
<label for="personal_aspects_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr"></span>Personal Aspects</label></li>
<li class="location_profile_tab" data-tab="location_profile" role="tab" rel="location_profile_tab"><input id="location_profile_input" type="checkbox" name="tabs" hidden/>
<label for="location_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa"></span>Your Location(s)</label></li>
<li class="interview_tab" data-tab="interview" role="tab" rel="interview_tab"><input id="interview_input" type="checkbox" name="tabs" hidden/>
<label for="personal_interview_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr"></span>Interview</label></li>
<li class="quizzes_profile_tab" data-tab="quizzes_profile" role="tab" rel="quizzes_profile_tab"><input id="quizzes_profile_input" type="checkbox" name="tabs" hidden/>
<label for="quizzes_profile_input"><img src="https://via.placeholder.com/50x50.png"><span class="fa fr angle_right_font fa-angle-right"></span>Quizzes</label>
<ul class="quizzes_group_sub_items">
<li class="quiz1_tab" data-tab="quiz1" role="tab" rel="quiz1_tab"><input id="quiz1_input" type="checkbox" name="tabs2" hidden/>
<label for="quiz1_input"><i class="fa"><img src="https://via.placeholder.com/50x50.png"></i>Quiz1</label></li>
<li class="quiz2_tab" data-tab="quiz2" role="tab" rel="quiz2_tab"><input id="quiz2_input" type="checkbox" name="tabs2" hidden/>
<label for="quiz2_input"><i class="fa"><img src="https://via.placeholder.com/50x50.png"></i>Quiz2</label></li>
</ul>
</li>
</ul>