How do I keep a menu link highlighted (as bold and blue) after clicking on it?

问题

I've got a header menu on my page (www.wortwaerts.net) that works fine on the basis of the code below apart from one issue I could not find a solution for so far: I'd like the menu link that was clicked last to stay highlighted (bold and blue) until another link is chosen which will then be highlighted in the same way. I've already studied some related requests/ answers on this page but couldn't implement the advices successfully (most included javascript) - I'm really a starter as to web development and would be very happy about any hint described in a "foolproof" way ;o)

Thanks a lot for your ideas! Cheers, Felix

#screen > header a{
   color:#000 !important;
   display:block;
   text-decoration:none
}

#screen > header a:hover{
   color:#19175C !important;
   text-decoration:none;
   font-weight:bold;
   background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
   background-size:.25em .375em;
   -moz-background-size:.25em .375em;
   -webkit-background-size:.25em .375em;
   font-weight:bold;
   margin-left:-.75em;
   padding-left:.75em
}

#screen > header strong a{
   background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
   background-size:.25em .375em;
   -moz-background-size:.25em .375em;
   -webkit-background-size:.25em .375em;
   font-weight:400;
   margin-left:-.75em;
   padding-left:.75em
}

.ielt8 #screen > header strong a{
   background-image:url(assets/img/bg-bullet.png)
 }

回答1:

You will need to use JavaScript for this; there is no CSS pseudo-class that will keep an element in a special state until another link is clicked. Focus is closest to what you want, but focusing other form elements or even tabbing through links would break it.

If you were using jQuery you could do something like this:

# In your CSS
#screen > header a.current {
  /* special style just for the current one */
}

# In your JavaScript
jQuery(function($){
  var headerAnchors = $('#screen > header a').click(function(){
    headerAnchors.removeClass('current');
    $(this).addClass('current');
  });
});

回答2:

In your css you can use the :visited pseudo class

a:visited { color: /* your colour */ }

回答3:

The :active class is applied to a link when a user clicks on it. It will remain until the user releases the mouse and the new page loads, or until they click on another link.

a:active { color: red; font-weight: bold; }

回答4:

This is an example for how to create css for links. Try it with your class/id names

 <style type="text/css">
    a:link {
        color: #06F;
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #F00;
        font-weight:bolder;
    }
    a:hover {
        text-decoration: underline;
        color: #990;
    }
    a:active {
        text-decoration: none;
        color: #93F;
        font-weight:bolder;
    }
    </style>

回答5:

Changing the #screen > header strong a rule to

#screen > header strong a{
   background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAAAAADBUmCpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHklEQVQIHWOI/PT/P4MxkGQwNra/CSV8bv5nAEkAANIFDmMxRyBPAAAAAElFTkSuQmCC) 0 50% no-repeat;
   background-size:.25em .375em;
   -moz-background-size:.25em .375em;
   -webkit-background-size:.25em .375em;
   font-weight:bold;
   margin-left:-.75em;
   padding-left:.75em;
   color: #19175c!important;
}

will make the currently selected page blue and bold.

It is the same rule that adds the little arrow to the left.

回答6:

Sorry - the information in the beginning of my answer was cut off: I replaced all href, a, http, image and img with NO - because I'm not allowed to post images and more than one hyperlink... Apart from that I did not change the code of my .js-file.

回答7:

If you were using jQuery you can set link class based on window.location.href. You can do it this way or similar:

$('.sidebar-nav > li > a').each(function (index, el) {
    if (el.href.indexOf(window.location.href) > -1 || window.location.href.indexOf(el.href) > -1) {
        $(el).addClass('current');
    } else {
        $(el).removeClass('current');
    }
})

In this case link will be highlighted even if you come to page directly by typing url in browser.

回答8:

I am newbie to web development as well and explored some websites where this is implemented. It seems like an easy way to do this is to just add a class (sometimes called "active-trail") to the menu item only on the page it links to and then style that class.

来源：https://stackoverflow.com/questions/4478647/how-do-i-keep-a-menu-link-highlighted-as-bold-and-blue-after-clicking-on-it

标签

html

css

hyperlink