.removeClass not removing class from panel menu link
My panel menu works, links work, but when I try to style it so that the current page's link is highlighted in the panel menu it doesn't want to cooperate.
Here's the relevant html:
-
<div data-role='panel' data-position='left' data-position-fixed='false' data-display='reveal' id='nav-panel'>
<ul data-role='listview' style='margin-top:-16px;' class='nav-search'>
<li class='menuitem'><a style='display:block;' href='#' data-rel='back'>Back</a></li>
<li data-icon='delete' >
<a href='#' data-rel='close'>Close menu</a>
</li>
<li id='drill-down' data-role='list-divider' style='background-color:black;color:white;font-family:Arial;padding-left:5px;padding-top:2px;padding-bottom:2px;font-size: 13.65px;'>Drill down in this period</li>
<li data-filtertext='wai-aria voiceover accessibility screen reader'>
<a href='#page1' class='current'>Home</a>
</li>
-
<li data-filtertext='wai-aria voiceover accessibility screen reader'>
<a href='#page1'>Info</a>
</li>
Here's the javascript:
- $( function() {
- $('#nav-panel').panel();
- });
- $(function() {
- $('#add-form').panel();
- });
- $(function() {
- $('a').on('click', function() {
- $('a .current').removeClass('current'); /* remove the class from the currently selected */
- $(this).addClass('current'); /* add the class to the newly clicked link */
- });
- });
... and here's the css that I want to launch with the javascript:
- a.current{
- font-weight:bold;
- font-style: italic;
- }
Why is this not working? Any suggestions?