I have a list of names with li tags and custom salesforce tabs with the same names. how can make a tab active when i select respected name from the list.

    <apex:page>
      <li><a href="#">My Tabs</a>
      <ul>
         <li><a href="#">My First</a></li>
         <li><a href="#">My Second</a></li>
      </ul>
      </li>

    <apex:tabPanel switchType="client" selectedTab="t1" id="tab_pannel">
     <apex:tab label="My First" name="t1" id="tabOne">
     ...
     </apex:tab>
     <apex:tab label="My Second" name="t2" id="tabtwo">
     ...
     </apex:tab>
    </apex:tabPanel>
  </apex:page>

(ex:Here when i select My First the tab My First should be active....)

Attribution to: Ramya

Possible Suggestion/Solution #1

It looks like you're mixing straight HTML and Visualforce in ways they aren't meant to be mixed. Abandon the tabPanel/tab construct and just use jQueryUI with tags around each of the tab bodies. You can still use regular Visualforce markup within each tag.

<apex:page showChat="false" sidebar="true" controller="MyController" >
<apex:stylesheet value="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" />
<apex:stylesheet value="https://jqueryui.com/resources/demos/style.css" />


<script>
    j$ = jQuery.noConflict();
    j$(function() {
        j$( "#tabs" ).tabs();
    });
</script>
<body>
<apex:form>
<apex:pageMessages id="pageMessages"/>
<div id="tabs">
    <ul>
        <li id="tabs-element-0"><a href="#tabs-0">{!$Label.StatusTab}</a></li>
        <li id="tabs-element-1"><a href="#tabs-1">{!$Label.SettingsTab}</a></li>
        <li id="tabs-element-2"><a href="#tabs-2">{!$Label.UsersTab}</a></li>
    </ul>
    <div id="tabs-0">
        <apex:pageBlock id="aStatus" mode="maindetail" helpUrl="http://www.google.com" helpTitle="{!$Label.HelpAndTraining}">
        </apex:PageBlock>
    </div>
    <div id="tabs-1">
        <apex:pageBlock id="aSettings" mode="maindetail" helpUrl="http://www.google.com" helpTitle="{!$Label.HelpAndTraining}">
        </apex:pageBlock>
    </div>
    <div id="tabs-2">
        <apex:pageBlock id="mUsers" mode="maindetail" helpUrl="http://www.google.com" helpTitle="{!$Label.HelpAndTraining}">
        </apex:pageBlock>
    </div>
</div>
</apex:form>
</body>
</apex:page>

Sample VF code (per Mr Fawcett's request).

Attribution to: DavidSchach

Possible Suggestion/Solution #2

Unfortunately it seems the apex:tabPanel component does not have a client side API to make tabs active via JavaScript. That said, I have two solutions to this, one client side, the other server side.

Client Side Only

This solution works, but may break if Salesforce change the way they output the HTML for the apex:tab component, so use with caution.

<apex:page>
    <li><a href="#">My Tabs</a>
    <ul>
        <li><a href="#" onclick="document.getElementById('{!$Component.tabOne}_lbl').click();">My First</a></li>
        <li><a href="#" onclick="document.getElementById('{!$Component.tabTwo}_lbl').click();">My Second</a></li>
    </ul>
    </li>
    <apex:tabPanel switchType="client" selectedTab="t1" id="tab_pannel">
        <apex:tab label="My First" name="t1" id="tabOne">
        </apex:tab>
        <apex:tab label="My Second" name="t2" id="tabtwo">
        </apex:tab>
    </apex:tabPanel>
</apex:page>

Server Side AJAX Solution

The following solution is supported and maintains the currently selected tab in the controller, then uses apex:outputLink to update the selected and rerender the tab component only on the page.

<apex:page controller="ClientTabController">
    <apex:form >
    <li><a href="#">My Tabs</a>
    <ul>
        <li>
            <apex:commandLink value="My First" rerender="tab_pannel">
                <apex:param assignTo="{!ActiveTab}" value="t1"/>
            </apex:commandLink>
        </li>
        <li>
            <apex:commandLink value="My Second" rerender="tab_pannel">
                <apex:param assignTo="{!ActiveTab}" value="t2"/>
            </apex:commandLink>
        </li>
    </ul>
    </li>
    <apex:tabPanel switchType="server" value="{!ActiveTab}" id="tab_pannel">
        <apex:tab label="My First" name="t1" id="tabOne">
        {!ActiveTab}
        </apex:tab>
        <apex:tab label="My Second" name="t2" id="tabtwo">
        {!ActiveTab}
        </apex:tab>
    </apex:tabPanel>
    </apex:form>
</apex:page>

This is the controller code

public with sharing class ClientTabController 
{
    public String ActiveTab {get;set;}

    public ClientTabController()
    {
        ActiveTab = 't1';
    }
}

I put the value of the ActiveTab property in the tab to check all is working fine...

enter image description here

Attribution to: Andrew Fawcett
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/31714

Search form

You are here

How to call a custom tab from li tag in salesforce?

Possible Suggestion/Solution #1

Possible Suggestion/Solution #2

My Block Status