function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brijesh KumarBrijesh Kumar 

click the apex:outputLink how can change the text color.

Hi
I used
<apex:outputLink value="/apex/DashBoard" id="myPage" target="theIframe" >My Page</apex:outputLink>
 
whenever i clicked the link (My Page) after click the link text color of My Page should be change.
 
 
can anybody give me Idea about this.Please help me It's very urgent in my project requirements
 
Thanks & Regards
Brijesh Kumar Baser
Sam.arjSam.arj
1) Use a CSS stylesheet file and define a new class for your links.

.Mylinks
{
    color:#000000;
}
a:visited
{
    color:Blue;
}

Then add the resource to your VF page and use the following line:
<apex: outputLink value="/apex/DashBoard" id="myPage" target="theIframe" styleClass="MyLinks">My Page</apex: outputLink>


2) You be able to use a javascript function to capture the click event of the outputLink:

<apex: outputLink value="/apex/DashBoard" id="myPage" target="theIframe" onclick="linkclick()" ><div id="mylink" style="text-decoration: underline;">My Page</div></apex: outputLink>

<script type="text/javascript">
  function linkclick()
  {
      window.document.getElementById("mylink").style.color = "YourVisitedColor";
  }
</script>
Brijesh KumarBrijesh Kumar
 Hi  Sam.arj
 
Thanks your reply.It's greate for me.
 
I used javascript concepts for this.
 
I my project there so many links.once i clicked the link It's color change but whenever click second link previous link color should be same as the color when page load.
 
for e.g.
In my project I used 6 links. when page load All links in white color when click 1 st link It's color changed but when click second or other link. 1 st link color should be white(previous one).
 
 
 
<apex:outputLink value="/apex/DashBoard" id="myPage" target="theIframe" styleClass="top_menu" onclick="myPage()" ><div id="My_Page_color" style="text-decoration: underline;">My Page</div></apex:outputLink>
                                <apex:outputLink value="/apex/Strategic_Dashboards" id="Strategic_Dashboards" target="theIframe" styleClass="top_menu" onclick="Strategic()"><div id="Strategic_Dashboards_color" style="text-decoration: underline;">Strategic Dashboards</div></apex:outputLink>
                                <apex:outputLink value="/apex/Program_Setup" id="Program_Setup"  target="theIframe" styleClass="top_menu" onclick="Setup()"><div id="Program_Setup_color" style="text-decoration: underline;">Program Setup</div></apex:outputLink>
                                <apex:outputLink value="/apex/Store_Performance" id="Store_Performance"  target="theIframe" styleClass="top_menu" onclick="Store()"><div id="Store_Performance_color" style="text-decoration: underline;">Store Performance</div></apex:outputLink>
                                <apex:outputLink value="/apex/Forecasting" id="Forecasting"  target="theIframe" styleClass="top_menu" onclick="Forecasting()"><div id="Forecasting_color" style="text-decoration: underline;">Forecasting</div></apex:outputLink>
                                <apex:outputLink value="/apex/Inventory_Management" id="Inventory_Management"  target="theIframe" styleClass="top_menu" onclick="Inventory()"><div id="Inventory_Management_color" style="text-decoration: underline;">Inventory Management</div></apex:outputLink>
 
Can you help me this kind.
 
Thanks & Regards
Brijesh Kumar Baser
Brijesh KumarBrijesh Kumar
 Hi  Sam.arj
 
Thanks your reply.It's greate for me.
 
I used javascript concepts for this.
 
I my project there so many links.once i clicked the link It's color change but whenever click second link previous link color should be same as the color when page load.
 
for e.g.
In my project I used 6 links. when page load All links in white color when click 1 st link It's color changed but when click second or other link. 1 st link color should be white(previous one).
 
 
 
<apex:outputLink value="/apex/DashBoard" id="myPage" target="theIframe" styleClass="top_menu" onclick="myPage()" ><div id="My_Page_color" style="text-decoration: underline;">My Page</div></apex:outputLink>
                                <apex:outputLink value="/apex/Strategic_Dashboards" id="Strategic_Dashboards" target="theIframe" styleClass="top_menu" onclick="Strategic()"><div id="Strategic_Dashboards_color" style="text-decoration: underline;">Strategic Dashboards</div></apex:outputLink>
                                <apex:outputLink value="/apex/Program_Setup" id="Program_Setup"  target="theIframe" styleClass="top_menu" onclick="Setup()"><div id="Program_Setup_color" style="text-decoration: underline;">Program Setup</div></apex:outputLink>
                                <apex:outputLink value="/apex/Store_Performance" id="Store_Performance"  target="theIframe" styleClass="top_menu" onclick="Store()"><div id="Store_Performance_color" style="text-decoration: underline;">Store Performance</div></apex:outputLink>
                                <apex:outputLink value="/apex/Forecasting" id="Forecasting"  target="theIframe" styleClass="top_menu" onclick="Forecasting()"><div id="Forecasting_color" style="text-decoration: underline;">Forecasting</div></apex:outputLink>
                                <apex:outputLink value="/apex/Inventory_Management" id="Inventory_Management"  target="theIframe" styleClass="top_menu" onclick="Inventory()"><div id="Inventory_Management_color" style="text-decoration: underline;">Inventory Management</div></apex:outputLink>
 
Can you help me this kind.
 
Thanks & Regards
Brijesh Kumar Baser
Brijesh KumarBrijesh Kumar

hi Team

I found the solution for this kind

 

function myPage()
  {
        window.document.getElementById("My_Page_color").style.color = "#ffc212";
        window.document.getElementById("Strategic_Dashboards_color").style.color = "#ffffff";
        window.document.getElementById("Program_Setup_color").style.color = "#ffffff";
        window.document.getElementById("Store_Performance_color").style.color = "#ffffff";
        window.document.getElementById("Forecasting_color").style.color = "#ffffff";
        window.document.getElementById("Inventory_Management_color").style.color = "#ffffff";
  }

 

Thanks & Regards

Brijesh Kumar Baser
Brijesh KumarBrijesh Kumar

This function is inside in <script>

</script>
BigRobBigRob

You can also use the style attribute.

<apex:outputLink target="_blank" style="color:blue"  value="http://