I've been struggling to get this going, but I am missing something. I want to show the tab that is currently active. I'm using jQuery to achieve this.
With the "main tabs" .tabs_item
it works fine, but if I click on a "sub-tab" item, I want to activate the parent of that "sub-tab"
Hope its put clearly enough.
HTML:
<div class="cssmenu">
<ul>
<!-- 1 -->
<li class='tabs_item' id='tabDemographic'><a href='#page-1' class='active_pat_tab'><span>Demographics</span></a></li>
<!-- 2 -->
<li class='has-sub tabs_item'><a href='#page-2'><span>Admission</span></a>
<ul>
<li id='tabAdmission' class='tabsub'><a href='#'><span>Admission detail</span></a></li>
<li id='tabMedicalStaff' class='tabsub last_sub' ><a href='#page-12'><span>Staff</span></a></li>
</ul>
</li>
<!-- 3 -->
<li class='has-sub tabs_item'><a href='#'><span>History</span></a>
<ul>
<li class='tabsub' id='tabComorbidity'><a href='#page-6'><span>Co-Morb</span></a></li>
<li class='tabsub last_sub' id='tabPMH'><a href='#page-7'><span>PMH</span></a></li>
</ul>
</li>
<!-- 4 -->
<li class='tabs_item' id='tabModalities'><a href='#page-10'><span>Modalities</span></a></li>
<li class='tabs_item' id='tabAssessments'><a href='#page-8'><span>Assessments</span></a></li>
<li class='last tabs_item' id='tabDischarge'><a href='#page-11'><span>Discharge</span></a></li>
</ul>
</div>
jQuery:
$('.cssmenu ul li a').click(function() {
$('.cssmenu ul li a.active_pat_tab').removeClass('active_pat_tab');
$(this).closest('.cssmenu ul li a').addClass('active_pat_tab');
});
$('.cssmenu ul li ul li.tabsub a').click(function() {
$('.cssmenu ul li a.active_pat_tab').removeClass('active_pat_tab');
$(this).parents('.cssmenu ul li a').addClass('active_pat_tab');
});
The 2nd bit of the script is the faulty/tricky bit that I can't seem to sus out.
Here is the fiddle