Question

我的页面上有一个标题菜单（www.wortwaerts.net），根据下面的代码可以正常工作，除了一个问题我到目前为止找不到解决方案：我喜欢这个菜单最后点击的链接保持突出显示（粗体和蓝色），直到选择另一个链接，然后以相同的方式突出显示。我已经在这个页面上研究了一些相关的请求/答案，但是无法成功实现建议（大多数包括javascript） - 我真的是Web开发的首发，并且会对“万无一失”中描述的任何提示感到非常高兴“方式; o）

非常感谢你的想法！干杯，菲利克斯

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

Answer 1

您需要使用JavaScript;没有CSS伪类可以将元素保持在特殊状态，直到单击另一个链接。焦点最接近你想要的，但是关注其他表单元素甚至通过链接进行标记会破坏它。

如果你使用的是jQuery，你可以这样做：

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

Answer 2

在你的CSS中你可以使用：visited pseudo class

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

Answer 3

当用户点击链接时，:active类将应用于链接。它将保持不变，直到用户释放鼠标并加载新页面，或者直到他们点击另一个链接。

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

Answer 4

这是如何为链接创建css的示例。尝试使用您的类/ ID名称

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

Answer 5

将#screen > header strong a规则更改为

#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;
}

将使当前选中的页面变为蓝色和粗体。

将小箭头添加到左侧是相同的规则。

Answer 6

抱歉 - 我的答案开头的信息被截断：我已将所有href，a，http，image和img替换为NO - 因为我不允许发布图片和多个超链接...除此之外我没有更改我的.js文件的代码。

Answer 7

如果您使用的是jQuery，则可以根据window.location.href设置链接类。你可以这样或类似的方式做到这一点：

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

在这种情况下，即使您通过在浏览器中输入网址直接进入页面，链接也会突出显示。

Answer 8

我也是网络开发的新手，并探索了一些实现这一点的网站。这似乎是一种简单的方法，只需在它链接的页面上添加一个类（有时称为“活动跟踪”）到菜单项，然后设置该类的样式。

如何在点击后突出显示菜单链接（粗体和蓝色）？

8 个答案: