-1

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>

Improve this question
2
  • 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, 2013 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, 2013 at 23:37

2 Answers 2

Reset to default
2

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>
Improve this answer
1
  • 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, 2013 at 6:37
1

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>
Improve this answer
5
  • 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, 2013 at 23:57
  • If I use apex:tabpanel I will lose my look and feel on my UI
    – sfdc
    Dec 11, 2013 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, 2013 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, 2013 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, 2013 at 0:17

Not the answer you're looking for? Browse other questions tagged .