0

如何在没有 jquery 的情况下添加活动类。我在简单的 css 中采购了菜单，但我希望以不同的颜色激活。任何人都可以帮我将活动课程添加到菜单中吗

 #menu ul{
         margin: 0;padding: 0;
         list-style-type: none;
         font-family: verdana, arial, Helvetica, sans-serif;
         }
#menu li { 
         margin: 0 0 0px 0; 
         display: inline; float: left; 
         margin-left: 1px solid #ffffff;
         }
#menu a{
       display: block; padding: 5px 10px; 
       width: 100px; border-right: 2px solid #ffffff; 
       text-decoration: none;  border-left: 10px solid #1958b7;  
       color: #fff; background: #2175bc;
       }
#menu a:hover{
             color: pink; background: #2586d7;   
             border-left: 10px solid #1c64d1; 
             }

我的本意不是主动上课；但是当用户单击选项卡时，选项卡的颜色将从悬停颜色更改。所以我不会在 html 正文中提及任何活动类。

4

5 回答 5

2

试试下面的代码：

CSS

#menu a:active {
    color: pink; background: #2586d7;   
    border-left: 10px solid #1c64d1; 
}
于 2013-06-25T12:22:21.307 回答
1

你可以试试这个：

document.getElementById("menu").className = "Active";

或者像这样编辑任何其他属性。

于 2013-06-25T12:22:47.053 回答
0

以下是如何在没有jQuery 的情况下在 javascript 中功能性地做到这一点。

我考虑到您一次只希望一个菜单项处于活动状态。

<script type="text/javascript">
    function menuItemClicked(sender, event)
    {
      var menuItem = sender;

      //we need to get rid of the item that was active before
      var menuitems = document.getElementsByTagName("ul");
      for (var i = 0; i < menuitems.length; i++) 
      {
        //if this ul is a menu item
        if (menuitems[i].className.indexOf("menuitem") != -1) 
        {
          //reset its classname.
          menuitems[i].className = "menuitem";
        }
      }

      //and now we add the "active" class to the item we clicked.
      menuItem.className = dmenuItem.className + " active";
    }
</script>


<ul>
  <li class="menuitem" onclick="menuItemClicked(this, event)">I am a menu item</li>
  <li class="menuitem" onclick="menuItemClicked(this, event)">I am a menu item too</li>
</ul>
于 2013-06-25T12:29:44.407 回答
0

您可以在现代浏览器中使用classList。

以下是更快的原生 jQuery 类操作版本：

.addClass(className)     element.classList.add(className)
.removeClass(className)  element.classList.remove(className)
.toggleClass(className)  element.classList.toggle(className)
.hasClass(className)     element.classList.contains(className)

注意：看看jQuery 1.10.1是多么的无效

hasClass: function( selector ) {
  var className = " " + selector + " ",
    i = 0,
    l = this.length;
  for ( ; i < l; i++ ) {
    if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
      return true;
    }
  }
  return false;
}
于 2013-06-25T12:30:13.453 回答
0

这取决于您如何实现这一点，在静态站点上，您可以将<li>您想要激活的结构更改为：

<li class="active">

然后在你的CSS

#menu li.active a { background:red; color:#fff; }

如果你想要active并且hover是一样的：

#menu a:hover, 
#menu li.active a { 
    background:red; color:#fff; 
}
于 2013-06-25T12:19:55.203 回答