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で機能的に行う方法は次のとおりです。

一度に 1 つのメニュー項目だけをアクティブにしたいということを考慮しています。

<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 に答える