How to add a class onto the selected li element and make li full-sized-clickable
<p>I want to add a class to the selected 'li' and at the same time, remove the class:selected from previous selected li element.</p>

<p>I have worked on it hours and still haven't got any luck. I also checked others questions, but their solutions don't work for me.</p>

<p>Help please....</p>

<pre><code>&lt;ul id='mainView' class='menu' style='float: left; clear: both;'&gt;      
    &lt;a href="/Link1"&gt;&lt;li&gt;Patient&lt;/li&gt;&lt;/a&gt;
    &lt;a href="/Link2"&gt;&lt;li&gt;Recommendations&lt;/li&gt;&lt;/a&gt;

&lt;/ul&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $('.menu ul a').on('click', function (event) {
            $('.menu ul a.selected').className = '';
            alert($(this).attr('id'));
            $(this).attr('class') = 'selected';
        });
    });

//    $('.menu li').on('click', function () {
//        $('.menu li.selected').className = '';
//        this.className = 'selected';
//    });
&lt;/script&gt;
</code></pre>

<p><strong>Update:</strong></p>

<p>I did put a inside li, but if I click on the li not the a inside of the li, the webpage does not redirect. That's the reason why I do it in a reversed way.</p>

<p><strong>Update 2</strong>
The reason why the selected li does not get the "selected" class is because the whole webpage is redirected to a new page which has the same navigation bar.
So now the question is how to highlight the selected li(it was selected on the previous page) on the new webpage.</p>
