Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

change the background color of a link using css

Posted on 2011-03-13
8
181 Views
Last Modified: 2012-05-11
Hi, I have a page with an iframe and links. When I click on the link the background of that link change, but when I click anywhere in the document the background changes back.
How can I keep the :active background until another link is clicked no matter what happens in the iframe or elsewhere in the document?

my links look like this:
<span><a class="index_vertical_links" href="javascript:jumpto('<?php echo "$main_output"; ?>')" >Page</a></span>
<span><a class="index_vertical_links" href="javascript:jumpto('<?php echo "$display_form"; ?>')" >some other page</a></span>
<span><a class="index_vertical_links" href="javascript:jumpto('<?php echo "$add_new?cat_add=1"; ?>')" >other page</a></span>

my css looks like this:
a.index_vertical_links:link,a.index_vertical_links:Visited
{
width:235px;
height:20px;
padding-left:20px;
float:left;
color:#ffffff;
background-color:#3f5d83;
border-right:1px solid #264266;
border-top:1px solid #3f5d83;
border-bottom:1px solid #3f5d83;
text-align:left;
text-decoration:none;
letter-spacing:1pt;
word-spacing:0pt;
font-weight:normal;
font-size:12px;
font-family:MS Sans Serif,Arial,sans-serif;
line-height:18px;
}

a.index_vertical_links:Hover
{
width:234px;
height:20px;
border-left:1px solid #264266;
float:left;
color:#e4ab13;
background-color:#787b6a;
border-right:1px solid #787b6a;
border-top:1px solid #264266;
border-bottom:1px solid #264266;
text-align:left;
text-decoration:none;
letter-spacing:1pt;
word-spacing:0pt;
font-weight:normal;
font-size:12px;
font-family:MS Sans Serif,Arial,sans-serif;
line-height:18px;
}

a.index_vertical_links:active,a.index_vertical_links:focus
{
width:235px;
height:20px;
padding-left:20px;
float:left;
color:#e4ab13;
background-color:#787b6a;
border-right:1px solid #787b6a;
border-top:1px solid #264266;
border-bottom:1px solid #264266;
text-align:left;
text-decoration:none;
letter-spacing:1pt;
word-spacing:0pt;
font-weight:normal;
font-size:12px;
font-family:MS Sans Serif,Arial,sans-serif;
line-height:18px;
}
0
Comment
Question by:ikon32
  • 5
  • 3
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35124783
try this simple thing

a.index_vertical_links_visited
{
width:235px;
height:20px;
padding-left:20px;
float:left;
color:#ffffff;
background-color:#3f5d83;
border-right:1px solid #264266;
border-top:1px solid #3f5d83;
border-bottom:1px solid #3f5d83;
text-align:left;
text-decoration:none;
letter-spacing:1pt;
word-spacing:0pt;
font-weight:normal;
font-size:12px;
font-family:MS Sans Serif,Arial,sans-serif;
line-height:18px;
}

<span><a class="index_vertical_links" href="javascript:this.setAttribute('class','index_vertical_links_visited');jumpto('<?php echo "$main_output"; ?>')" >Page</a></span>
0
 

Author Comment

by:ikon32
ID: 35124872
thanks for the comment!  I tried and when I clicked on the link it rerurn this error:
Webpage error details

Message: Object doesn't support this property or method
Line: 1
Char: 1
Code: 0
URI:  index.php

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35124934
remove the echo part and try once

<span><a class="index_vertical_links" href="javascript:this.setAttribute('class','index_vertical_links_visited');">Page</a></span>



0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:ikon32
ID: 35124955
same error
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 35124972
ok, then try this solution

http://stackoverflow.com/questions/2490627/how-can-i-reliably-set-the-class-attr-w-javascript-on-ie-ff-chrome-etc

<span><a class="index_vertical_links" href="javascript:this.className = 'index_vertical_links_visited';">Page</a></span>
0
 

Author Comment

by:ikon32
ID: 35125034
tried this without error but again when i click anywhere the background is changing back.
<span><a class="index_vertical_links" href="javascript:this.className = 'index_vertical_links_visited';jumpto('<?php echo "$display_form"; ?>')">Page</a></span>

Going over to check that question, if you can think of anything else please post!  
0
 

Author Comment

by:ikon32
ID: 35125184
cant get it right... can it be done with just css?
0
 

Author Closing Comment

by:ikon32
ID: 35224228
thank you
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Grunt script for Build Process 1 43
Dynamic Dropdowns 15 32
How to reload page and grab querystring 2 23
suddenly angular cli doesn't work. 5 40
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question