jQuery Mobile listview try highlight selected item by applying 'ui-btn-active' class not working. Is there a 'selected' class

Question

I have few jquery-mobile pages and a global panel which act as a side menu. I need to highlight the list item when the panel appears to indicate which page is currently active.

A Demo page is available at: https://jsfiddle.net/pengyanb/btm7es4m/7/

I try to add the 'ui-btn-active' class to the 'li' element (the 'li' elements do not contain any 'a' child), it seems there is no effect. Is there a class that can be applied to the 'li' element of the listview to achieve the highlight effect? Thanks in advance.

$('#globalPanel').panel().enhanceWithin();

$('#gotoPage1').unbind().click(function(){
    $.mobile.changePage("#page1", {transition: "flip"});
});
$('#gotoPage2').unbind().click(function(){
    $.mobile.changePage("#page2", {transition: "flip"});
});

$('#globalPanel').off().on('panelbeforeopen', function(event, ui){
    $('#globalPanel').find('li').removeClass('ui-btn-active');
    if($.mobile.activePage.attr('id') === 'page1')
    {
        console.log("Trying to highlight Panel item1");
        $('#gotoPage1').addClass('ui-btn-active');
    }
    else if($.mobile.activePage.attr('id') === 'page2')
    {
        console.log("Trying to highlight Panel item2");
        $('#gotoPage2').addClass('ui-btn-active');
    }
    $('#globalPanel').find('ul').listview('refresh');
});

<!--Page 1-->
<div data-role="page" id="page1" data-theme="a">
            <!--header-->
            <div data-role="header" data-position="fixed">
                <a href="#globalPanel" class="ui-btn ui-btn-left ui-icon-bars ui-btn-icon-notext ui-corner-all"></a>
                <h5>Page 1</h5>
            </div>
            <!--content-->
            <div data-role="main" class="ui-content">
            </div>
</div>
<!--Page 2-->
 <div data-role="page" id="page2" data-theme="a">
            <!--header-->
            <div data-role="header" data-position="fixed">
                <a href="#globalPanel" class="ui-btn ui-btn-left ui-icon-bars ui-btn-icon-notext ui-corner-all"></a>
                <h5>Page 2</h5>
            </div>
            <!--content-->
            <div data-role="main" class="ui-content">
            </div>
</div>

<!--Global Panel-->
<div data-role="panel" id="globalPanel" data-transition="reveal" data-position-fixed="true" data-position="left" data-theme="b">
    <ul data-role="listview" data-inset="false" data-corners="false">
        <li id="gotoPage1">Page 1</li>
        <li id="gotoPage2">Page 2</li>
    </ul>
</div>

Answer 1

By default, ui-btn-active does not work with plain <li> elements. So you can just add this CSS:

li.ui-btn-active {
    background-color:       #22aadd !important;
    border-color:           #22aadd !important;
    color:                  #fff !important;
    text-shadow: 0 0 #0088bb !important;
}

Updated FIDDLE