0

ナビゲーション メニューがあり、2 つのことをしようとしています。1 つのリスト アイテムにカーソルを合わせると、その 1 つのアイテムが強調表示されるようにしようとしています。1 つのアイテムをクリックすると、このアイテムが現在フォーカスされていることを示す特定の色またはスタイルを適用しようとしています。アクティブ。別のアイテムを選択すると、現在のアイテムが非アクティブになり、新しく選択したアイテムがアクティブになります。

これは私が試したCSSですが、現在、リスト項目にカーソルを合わせると、1つだけではなく、すべての項目が強調表示されています。

#listContainer{

      margin-top:15px;
    }

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;    
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 555555px;
    padding-left: 20px;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
#expList ul{
    margin-top: 5px;
}
#expList li:hover{
    background-color: #eee; This is where the problem is
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/collapsed.png');
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/expanded.png');
}

これは、ほとんどのコードを含む JSFiddle ですhttp://jsfiddle.net/aHSmy/1/

4

2 に答える 2

1

css でアクティブなクラスを定義し、Jquery を使用して適用および削除します

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

コードペンの例

于 2013-10-20T20:33:43.787 に答える