Jump to content

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
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
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
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
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

Link to post
Share on other sites
  • 4 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...