[SalesForce] Set li tag class attribute as active

I need to set the class as active in li tag.Below is the header page of community which contains set of tabs.So on click of tab it should set the li tag class to active.It is setting the li tag to active but after page refreshes it is losing its value.Please someone help me

 <apex:page title="{!$Label.site.site_login}" showHeader="false" sidebar="false"        standardStylesheets="false">
 <apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.4.2.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.6.custom.min.js')}"  />
  <apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.6.custom.css')}"  />        
<html lang="en">
 <head>
  <script language="JavaScript" type="text/javascript">
 var Lst;
  function ChangeClass(obj){
 if (Lst) Lst.className='';
 obj.className='active';
 Lst=obj;
 }
</script> 
</head>

<body>

      <div class="collapse navbar-collapse navbar-ex1-collapse" id="tabs">
                <ul class="nav navbar-nav">
                    <li id="Home">
                     <apex:outputLink value="{!$Page.Home}"       onclick="ChangeClass(Home);">Home</apex:outputLink>
                    </li>
                    <li id="chatter">
                     <apex:outputLink value="{!$Page.Chatter}" onclick="ChangeClass(chatter);>Chatter</apex:outputLink>
                    </li>
                    <li id="page3">
                        <apex:outputLink value="{!$Page.page3}" onclick="ChangeClass(page3);>Room</apex:outputLink>
                    </li>
                    <li id="page4">
                        <apex:outputLink value="{!$Page.page4}" onclick="ChangeClass(page4);>Page4</apex:outputLink>
                    </li>
                </ul>
            </div>
      </body>

</html>

Best Answer

Thank you @eyescream .Here is the solution

<ul class="nav navbar-nav">
                <li id="Home" class="{!IF($CurrentPage.Name == 'Home','active','')}">
                    <apex:outputLink value="{!$Page.Home}">Home</apex:outputLink>
                </li>
                <li id="chatter" class="{!IF($CurrentPage.Name == 'Chatter','active','')}">
                    <apex:outputLink value="{!$Page.Chatter}">Chatter</apex:outputLink>
                </li>
                <li id="page3" class="{!IF($CurrentPage.Name == 'page3','active','')}">
                    <apex:outputLink value="{!$Page.page3}">Room</apex:outputLink>
                </li>
                <li id="page4" class="{!IF($CurrentPage.Name == 'page4','active','')}">
                    <apex:outputLink value="{!$Page.page4}">Page4</apex:outputLink>
                </li>
            </ul>
Related Topic