0

嗨，当我在该页面上并且它不起作用时，我正试图让我的菜单链接变红。

html:

<li><a id="home" onclick="changeClass('home')" href="index.php">Home</a></li>

CSS：

#topMenu li{
    display:inline;
    margin-right:60px;
    font-size:12px;
    font-weight:bold;
    color:#000;
    text-decoration:none;
    }

#topMenu li a{
    color:#000;
    text-decoration:none;
    }

#topMenu li a:hover{
    color:#666;
    text-decoration:underline;
    }

.topMenuon{
    color:#F00
    }

Javascript：

 function changeClass(id)
    {
       var element = document.getElementById(id);
       element.className = element.className + ”topMenuon”;

    }

关于如何让它发挥作用的任何想法？

4

6 回答 6

1

您可能想要做那个服务器端，但如果由于某种原因您不能并且您不能使用jQuery：

function changeClass (id) {
  var el = document.getElementById(id);
  if (el.href == location.pathname) el.className += 'topMenuon';
};
于 2012-09-04T09:29:01.330 回答
1

包含 Jquery 更简单，并执行以下操作：

$('#home').on('click',function(){

   $(this).addClass('topmenuon');

});

但是，如果您要转到另一个页面，它就不会那样工作。您必须在 javascript/jquery 中以某种方式检测您所在的页面（使用 url 中的某些内容，或使用页面上的标识符，例如部分标题），然后在该页面上添加您的类（或者，做它服务器如果服务器直接渲染，则根本不调用它）。无论如何，如果您要离开页面，就不能像那样使用 onclick，新页面无法知道您是否正在执行完整的回发而不是 ajax！

于 2012-09-04T09:24:12.593 回答
0

申请为

var element = document.getElementById('home');  
        element.setAttribute("className", newClass);
于 2012-09-04T09:31:16.423 回答
0

使用 jquery - 这在<head>...

 <script src="yourPath/jquery_1.8.0_min.js" type="text/javascript"></script>

然后...

 $(document).ready(function(){

   $("#home").addClass('topMenuon');

 }

这样就可以了...

小号

于 2012-09-04T09:25:00.510 回答
0

纯js

window.onload = function(){
   document.getElementById("home").onclick = function(){
      this.className +=" topMenuon" ;
   }
}

编辑

单击链接，您可能会进入一个新页面。因此，上面的代码不会更改链接的类，因为您现在在一个新页面上。

您可能需要使用 php 将类添加到链接中（我假设您正在使用它）。

于 2012-09-04T09:30:00.070 回答
0 
function changeClass()
        {
            var element = document.getElementById('home');
            element.className += 'topMenuon';
        } 


<li><a id="home" onclick="changeClass();" href="#">Home</a></li>
于 2012-09-04T09:34:13.910 回答