Visualforce tab highlight in lightning experience

Question

I have an output link on a visualforce page that redirects to another visualforce page. I have a tab style defined for this customVFPage because of which the visualforce tab gets hightlighted/selected when clicked.

Here is the code for the link:

<apex:outputLink value="{!URLFOR($Page.CustomVFPage)}">
    <apex:outputText styleClass="textbelow" value="1. Go to custom page"/>
</apex:outputLink>

CustomVFPage

<apex:page Controller="CustomVFController" tabStyle="Custom__tab">
</apex:page>

This works fine in salesforce classic UI and the tab gets selected. However, in lightning UI, on clicking the link the customVFPage appears but the tab does not get highlighted. Is there any change required for this to work in lightning?

Answer 1

You need to add a method in visualforce script and change outputlink as

<apex:outputLink onclick="redirectTo('/apex/CustomVFPage')">
    <apex:outputText styleClass="textbelow" value="1. Go to custom page"/>
</apex:outputLink>

and then add following code in script of visualforce

<script>
    function redirect(Url)  {
            if(sforce && sforce.one) {
                sforce.one.navigateToURL(Url,true);
            }
            else {
                window.location.href = Url;
            }
        }
</script>

OutputLink can only work in classic environment. So in lightning you have to use sforce.one to navigate.