6

I have a header page with links to all the visualforce page as tabs.I need to highlight the tab on select of it.

    <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 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> 
$(function() 
{ 
 $( "#tabs" ).tabs(); 
 }); 
</script>  
<style> 
 #tabs .ui-tabs-active 
  { background: red; } 
</style>
    </head>

    <body>
        <nav class="navbar navbar-static-top navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="icon-bar"></span><span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" style="line-height: 0px; padding: 10px 15px;" href="index.php.html">
                        <img height="30px" src="{!URLFOR($Resource.Resources, 'img/logo.png ')}" />
                    </a>
                </div>
                <div class="collapse navbar-collapse navbar-ex1-collapse" id="tabs">
                    <ul class="nav navbar-nav">
                        <li id="Home">
                            <apex:outputLink value="{!$Page.Home}">Home</apex:outputLink>
                        </li>
                        <li id="chatter">
                            <apex:outputLink value="{!$Page.Chatter}">Chatter</apex:outputLink>
                        </li>
                        <li id="page3">
                            <apex:outputLink value="{!$Page.page3}">Room</apex:outputLink>
                        </li>
                        <li id="page4">
                            <apex:outputLink value="{!$Page.page4}">Page4</apex:outputLink>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>

    </html>
</apex:page>
8

Since you're using jQuery UI tabs, you can style the currently selected tab by applying your styles to the class ui-tabs-active.

  • Can you please tell me where to put the class ui-tabs-active in visualforce page – sfdc Oct 30 '13 at 13:50
  • That class is added automatically by jQuery UI to the selected tab. You can add CSS to that class anywhere you like, for instance: .ui-tabs-active { background-color: red; } – couchand Oct 30 '13 at 15:14
  • Do i need to add <script> $(function() { $( "#tabs" ).tabs(); }); </script> and <style> #tabs .ui-tabs-active { background: red; } </style> to visualforce page – sfdc Nov 15 '13 at 16:30
  • Yes. That's what initializes the tab interface and sets the style on the active tab class. – Mark Pond Dec 10 '13 at 16:44
  • @MarkPond when I added the above script in header I am getting all wierd errors – sfdc Dec 10 '13 at 17:19
0

This is more of an additional comment than an answer (but I need to show some code!)

When using jQuery and Salesforce, it's best to redefine the jQuery "shortcut" $.

<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')}"  />        

<script>
    /*  Use j$ instead of $ as the jQuery "shortcut"  */    
    var j$ = jQuery.noConflict();   

    j$(document).ready(function(){
        // onload events

    });

</script>

Since you are using jQuery UI tabs, just change the styling of the class ui-tabs-active in your style section of the head. Whenever a tab is selected, jQuery adds the class ui-tabs-active to the HTML element of the Tab.

<style>
    .ui-tabs-active{
        background-color:green;
        border:.5rem double white;
        font-size:1rem;
        color:white;
    }


</style>
  • I have added below script but still active tab is not highlighting <script> $j = jQuery.noConflict(); function menuClass(id) { $j(".active").removeClass("active"); $j("#"+id).addClass("active"); } </script> <style> #tabs .ui-tabs-active { background: red; } </style> – sfdc Dec 10 '13 at 20:40
  • I have included <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')}" /> – sfdc Dec 10 '13 at 20:41
  • try this, right click the active tab and select Inspect Element. See what the HTML element's id/classes are. Make sure to use that id/class name in your jQuery – Scott Pelak Dec 10 '13 at 21:15
0

I have fixed this issue and made tab active based on $CurrentPage.Name.Here is my 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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