Changing The Bg Color Of A Selected Link

June 27, 2023 Post a Comment

I have a menu that I am using and it will change the background color when I hover using a:hover but I want to know how to change the class=line so that it sticks. So from the ho

Solution 1:

I believe you are wanting to highlight the navigational item that you're on. My answer here is fairly valid in this question as well, I believe:

It's a better semantic match and likely an easier variable to set to keep the navigation using the same classes or ids everywhere and only alter the body element's id to match:

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

and then on each page...

<body id="home">
<body id="blog">

And in the css:

#home#homeNav {background-image:url(homeNav-on.jpg);}
#blog#blogNav {background-image:url(blogNav-on.jpg);}

Solution 2:

The way to change class (I assume you're talking of the DOM), in javascript is:

document.getElementById("element").className='myClass';

Hope this helps.

Solution 3:

The mechanism we use frequently is by having a few generic event listeners on the body and have all required events bubble up. Once caught, we check for a certain className (or className pattern) on the triggering element. If such a className is found, we consider it a state identifier, and we trigger behavior based on such states.

For instance, we have defined className pairs (such as "selected" and "unselected") with the default behavior of toggling. Or make them exclusive by giving the parent element the className "exclusive-selected".

A simple mechanism like that can be extended to your liking and can be very powerful.

Allow me to post a simple demonstration. Non-generic, but it is just to illustrate the inner workings of such a mechanism. For this example I consider the className pair "selected" and "unselected" to be exclusive.

<html><head><script>document.onclick = function(evt) {
        var el = window.event? event.srcElement : evt.target;
        if (el && el.className == "unselected") {
          el.className = "selected";
          var siblings = el.parentNode.childNodes;
          for (var i = 0, l = siblings.length; i < l; i++) {
            var sib = siblings[i];
            if (sib != el && sib.className == "selected")
              sib.className = "unselected";
          }
        }
      }
    </script><style>.selected { background: #f00; }
    </style></head><body><ahref="#"class="selected">One</a><ahref="#"class="unselected">Two</a><ahref="#"class="unselected">Three</a></body></html>

It ought to work on IE, Firefox and other browsers. Of course this mechanism can be made generic and have all kinds of className states and behaviors implemented.

Solution 4:

This may not apply to you, but it may lead you down the right path. If you are using PHP, stick this in your head before the doctype declaration or the (x)html tag:

<?php// Get current page file name$url = Explode('/', $_SERVER["PHP_SELF"]);
  $page = $parts[count($url) - 1];
?>

Then, in your menu item where you would like the class designation, place the following, but change "index.php" to the name of the page:

<?phpif ($page == "index.php") echo' class="current"'?>

So ultimately your menu should look similar to this:

<divid="navigation"><ul><li><ahref="index.php"<?phpif ($page == "index.php") echo' class="current"'?>>Home</a></li><li><ahref="page1.php"<?phpif ($page == "page1.php") echo' class="current"'?>>Resume</a></li><li><ahref="page2.php"<?phpif ($page == "page2.php") echo' class="current"'?>>Photography</a></li></ul></div>

Last step is adding the CSS:

#navigationullia.current {
  background-color: #FFF;
}

Hope this helps.

Solution 5:

You may want to check out jQuery (jquery.com).

Using jQuery, you would change the class (and stick it) like this:

$('#link-id').addClass('your-class');

You could bind the code to the links like this:

$('#link-id').mouseover(
   function(){
      $(this).addClass('your-class');
   }
);

http://docs.jquery.com/Attributes

Html5 Tutorial