更改选定链接的背景颜色答案

【问题标题】：Changing the BG Color of a selected link更改选定链接的背景颜色
【发布时间】：2008-10-15 22:01:33
【问题描述】：

我有一个正在使用的菜单，当我使用a:hover 悬停时它会改变背景颜色，但我想知道如何更改class=line 以使其保持不变。

所以如果他们从主页点击联系主页

从 (a href="#" class="clr") 到 (a href="#")

并且联系人会改变

从 (a href="#") 到 (a href="#" class="clr")

有什么帮助吗？

京东

【问题讨论】：

标签： html css

【解决方案1】：

我相信您想突出显示您所在的导航项。我的回答here 在这个问题上也相当有效，我相信：

这是一个更好的语义匹配，并且可能是一个更容易设置的变量，以保持导航在任何地方使用相同的类或 id，并且只更改 body 元素的 id 以匹配：

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

然后在每一页上...

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

在css中：

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

【讨论】：

【解决方案2】：

在 javascript 中更改类的方法（我假设你说的是 DOM）是：

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

我们经常使用的机制是在 body 上设置一些通用事件侦听器，并让所有需要的事件冒泡。一旦被捕获，我们会检查触发元素上的某个类名（或类名模式）。如果找到这样的 className，我们将其视为状态标识符，并根据此类状态触发行为。

例如，我们定义了具有默认切换行为的类名对（例如“selected”和“unselected”）。或者通过为父元素指定className“exclusive-selected”来使它们独占。

这样一个简单的机制可以根据您的喜好进行扩展，并且非常强大。

请允许我发布一个简单的演示。非泛型，但它只是为了说明这种机制的内部工作原理。对于这个例子，我认为 className 对“selected”和“unselected”是互斥的。

<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>
    <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
  </body>
</html>

它应该可以在 IE、Firefox 和其他浏览器上运行。当然，这种机制可以通用化，实现各种类名状态和行为。

【讨论】：

【解决方案4】：

这可能不适用于您，但它可能会引导您走上正确的道路。如果您使用的是 PHP，请在 doctype 声明或 (x)html 标记之前记住这一点：

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

然后，在您想要指定类的菜单项中，放置以下内容，但将“index.php”更改为页面名称：

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

所以最终你的菜单应该是这样的：

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

最后一步是添加 CSS：

#navigation ul li a.current {
  background-color: #FFF;
}

希望这会有所帮助。

【讨论】：

【解决方案5】：

您可能想查看 jQuery (jquery.com)。

使用 jQuery，您可以像这样更改类（并粘贴它）：

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

您可以像这样将代码绑定到链接：

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

http://docs.jquery.com/Attributes

【讨论】：