Jump to content
brian

Onclick Change Color

Recommended Posts

Here what am trying to do is I created a unorderlist of 4 links. Link1 , link2 , link3 and link4. I created a new page for the unorderlist so that i can include it with php with include_once code in the main page. Actually what i want is when ever i clik any link its color be change but the remaining be unchanged. For eg. I click link1 . The page opens and remaining link color same as what i expected but when i click another link as link2 my previous link1 color and link2 color are same. I can't give a active class in each link because i include the unoderlist link in external page and include it with php include_once text. Any idea how can i complete it.www.w3schools.com ..the website left hand side menu is an example what i am wishing to do is.. :(

  • Like 1

Share this post


Link to post
Share on other sites

What you normally do is have the included menu check the current page address it is been inserted into, against the menu link values and then add the class for active styling. Edit: Reading your topic again, Are you are describing pages that are visited, then you have to set the pseudo class for the anchor links to achieve this. Example: #menu a:visited { color:purple; } This must be placed in specific order though, a good way to remember the order is to use the phrase 'love hate' L = :linkoV =:visitedeH = :hoverA = :activete

Edited by dsonesuk

Share this post


Link to post
Share on other sites

well am very noob .. but i want create a buttons like same as this forum menu ( w3schools Forums Members Calender) effect is same link visited hover and active just not working.. :( i cant give active class in each link because my link items are in external page . I had include it with include_once php code so that when ever i had to add or del only once.Do i need java script or only css its possible . My code doesnt show any action like this forum menu type. :(Below is my code..

Edited by brian

Share this post


Link to post
Share on other sites
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style type="text/css">ul.tabs {margin: 0;padding: 0;float:left;list-style: none;height: 32px; /*--Set height of tabs--*/border-bottom: 1px solid #999;border-left: 1px solid #999; }ul.tabs li {float: left;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden;position: relative;background: #ddd;}ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #fff;outline: none;}ul.tabs li a:hover {background: #ccc;}ul.tabs li.active, html ul.tabs li.active a:hover  {background: #f1f2f2;border-bottom: 1px solid #f1f2f2; }	</style></head><body><ul class="tabs"><li><a href="#"> link 1</a></li>	<li><a href="#">link 2</a></li>	<li><a href="#">link 3</a></li>	<li><a href="#">link 4</a></li>  </ul></body></html>

Edited by brian

Share this post


Link to post
Share on other sites
but when i click another link as link2 my previous link1 color and link2 color are same
that is reference to visited link Anyhow you need to dynamically produce your menu using php, then you can search the current page address, and assign the active class to that specific link. menu.php
<?php$link_title = array("link 1", "link 2", "link 3", "link 4");$link_page = array("page1.php", "page2.php", "page3.php", "page4.php");$count=0;?><ul class="tabs"><?phpforeach($link_page as $link){if(basename($_SERVER['SCRIPT_NAME']) == $link){$active=' class="active"';}else{$active='';}echo '<li '.$active.'><a href="'.$link.'">'.$link_title[$count].'</a></li>';$count++;}?> </ul>

page1.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">ul.tabs {margin: 0;padding: 0;float:left;list-style: none;height: 32px; /*--Set height of tabs--*/border-bottom: 1px solid #999;border-left: 1px solid #999; }ul.tabs li {float: left;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden;position: relative;background: #ddd;}ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #fff;outline: none;}ul.tabs li a:hover {background: #ccc;}ul.tabs li.active, html ul.tabs li.active a:hover  {background: #f1f2f2;border-bottom: 1px solid #f1f2f2; }	    </style></head><body><?phpinclude("menu.php");?><h1>Page 1</h1></body></html>

copy page1.php for page2.php and so on

Share this post


Link to post
Share on other sites

Its really a awome trick thank you very much Dsonesuk:)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×