Question

您好我正在尝试让我的菜单链接变为红色，当我在该页面上并且它无效时。

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

    }

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

Answer 1

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

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

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

});

但是，如果您要访问其他页面，它将无法正常工作。您必须在javascript / jquery中以某种方式检测您所在的页面（使用网址中的内容，或使用页面上的标识符，例如部分标题），然后在您访问该页面时添加您的课程（或者，执行服务器）如果服务器直接渲染，那么根本不要调用它。如果你要离开页面，就不能使用onclick，新页面无法知道你是在做完全回发而不是ajax！

Answer 2

您可能想要执行该服务器端，但如果由于某种原因您不能这样做而你不能使用jQuery：

function changeClass (id) {
  var el = document.getElementById(id);
  if (el.href == location.pathname) el.className += 'topMenuon';
};

Answer 3

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

中

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

...然后

 $(document).ready(function(){

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

 }

那就行了......

取值

Answer 4

Plain js

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

修改

您可能会点击链接进入新页面。因此，上面的代码不会改变链接的类，因为您现在处于新页面。

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

Answer 5

申请

var element = document.getElementById('home');  
        element.setAttribute("className", newClass);

Answer 6

function changeClass()
        {
            var element = document.getElementById('home');
            element.className += 'topMenuon';
        } 


<li><a id="home" onclick="changeClass();" href="#">Home</a></li>

使用javascript onclick设置CSS颜色

6 个答案: