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">
  <script language="JavaScript" type="text/javascript">
 var Lst;
  function ChangeClass(obj){
 if (Lst) Lst.className='';


      <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 id="chatter">
                     <apex:outputLink value="{!$Page.Chatter}" onclick="ChangeClass(chatter);>Chatter</apex:outputLink>
                    <li id="page3">
                        <apex:outputLink value="{!$Page.page3}" onclick="ChangeClass(page3);>Room</apex:outputLink>
                    <li id="page4">
                        <apex:outputLink value="{!$Page.page4}" onclick="ChangeClass(page4);>Page4</apex:outputLink>


  • I also updated script with <script> $j = jQuery.noConflict(); function ChangeClass(id){ $j(".active").removeClass("active"); $j("#"+id).addClass("active"); } </script> But still not working – sfdc Dec 10 '13 at 23:27
  • I also tried below but not working <li id="Home" class = "{!IF($Page.Home == 'true','active','')}"><apex:outputLink value="{!$Page.Home}">Home</apex:outputLink></li> <li id="chatter" class = "{!IF($Page.Chatter == 'true','active','')}"><apex:outputLink value="{!$Page.Chatter}">Chatter</apex:outputLink></li> – sfdc Dec 10 '13 at 23:37

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 id="chatter" class="{!IF($CurrentPage.Name == 'Chatter','active','')}">
                    <apex:outputLink value="{!$Page.Chatter}">Chatter</apex:outputLink>
                <li id="page3" class="{!IF($CurrentPage.Name == 'page3','active','')}">
                    <apex:outputLink value="{!$Page.page3}">Room</apex:outputLink>
                <li id="page4" class="{!IF($CurrentPage.Name == 'page4','active','')}">
                    <apex:outputLink value="{!$Page.page4}">Page4</apex:outputLink>
  • Hi sf.dev! Glad I could help. Will you please mark your answer as accepted so it goes "off the radar" and improves our % of answered questions (it's one of statistics that needs to be better if we want to push this site out of beta) :) – eyescream Dec 11 '13 at 6:37

Not really an answer I think, I'd say there are lots of options depending on what you want to achieve.

  1. Do you have to refresh whole page? Maybe some rerender or content of the tabs loaded via ajax (http://jqueryui.com/tabs/#ajax) will help?
  2. Alternatively try some JS that will loop through tabs and compare their links to the current window.location like in https://stackoverflow.com/questions/10246199/jquery-tabs-make-current-tab-highlighted-from-separate-navigation.
  3. Last but not least - does it have to be jQuery UI? I know jQ is the ultimate answer ;) but VF offers the <apex:tabPanel> tag...
  4. I have a feeling you're repeating the same set of tabs on each page you lined to? If you're coming from .NET environment and are looking for "master page + some stuff you include to it" you could build your main navigation based on <apex:composition>
  • Above is my header page which contains (tabs)links to different pages.So i included above page using apex:include in all different pages.So I don't know how to use rerender attribute in my case – sfdc Dec 10 '13 at 23:57
  • If I use apex:tabpanel I will lose my look and feel on my UI – sfdc Dec 11 '13 at 0:08
  • 1
    Try showing {!$CurrentPage.Name} or {!$CurrentPage.url} instead of {!$Page.Home} etc. I think you got them confused, hopefully current one will change on each tab and you'll be able to base the highlight on that? – eyescream Dec 11 '13 at 0:08
  • @eyescream..Thank you..This fixed my issue <li id="chatter" class = "{!IF($CurrentPage.Name == 'Chatter' ,'active','')}"><apex:outputLink value="{!$Page.Chatter}">Chatter</apex:outputLink></li> – sfdc Dec 11 '13 at 0:15
  • 1
    I should have spotted that one earlier, must be tired ;) After midnight over here... Still - if you include 1 page in several other pages try to read about templates! – eyescream Dec 11 '13 at 0:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.