如何在点击菜单链接后突出显示（粗体和蓝色）？ [英] How do I keep a menu link highlighted (as bold and blue) after clicking on it?

问题描述

我在我的网页上有一个标题菜单（ www.wortwaerts.net ），在代码的基础上下方除了一个问题我无法找到到目前为止的解决方案：我想这是最后一次点击留高亮（粗体和蓝色），直到另一个链接选择菜单链接，然后将在突出同样的方式。我已经研究过这个页面上一些相关的请求/应答，但无法成功实施意见（大部分包含的JavaScript） - 我真的首发为Web开发和会约在一个万无一失描述的任何暗示很开心way; o）

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)

非常感谢您的想法！ Cheers，Felix

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

推荐答案

您需要使用JavaScript;没有CSS伪类将保持元素在特殊状态，直到另一个链接被点击。焦点最接近你想要的，但聚焦其他表单元素，甚至通过链接，将打破它。

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.

如果你正在使用jQuery你可以做这样的事情：

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');
  });
});

这篇关于如何在点击菜单链接后突出显示（粗体和蓝色）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！