Question

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

因此，如果他们点击联系主页

，请从家里来

从（a href =“＃”class =“clr”）到（a href =“＃”）

和联系人会改变

从（a href =“＃”）到（a href =“＃”class =“clr”）

任何帮助？

JD

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

Answer 2

改变类的方法（我假设你在谈论DOM），在javascript中是：

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

希望这有帮助。

Answer 3

我们经常使用的机制是在主体上放置一些通用的事件监听器，并使所有必需的事件冒出来。一旦被捕获，我们就会在触发元素上检查某个className（或className模式）。如果找到这样的className，我们将其视为状态标识符，并根据这些状态触发行为。

例如，我们使用切换的默认行为定义了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和其他浏览器。当然，这种机制可以是通用的，并且可以实现各种className状态和行为。

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

希望这有帮助。

Answer 5

您可能想查看jQuery（jquery.com）。

使用jQuery，你可以像这样更改类（并坚持下去）：

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

您可以将代码绑定到以下链接：

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

http://docs.jquery.com/Attributes

更改所选链接的BG颜色

5 个答案: