リンクに基づくMenubar。クリック時に背景が変化しない

Question

Menubarはリンクのリストに基づいています。クリックしたアイテムの背景色を変更して残す必要があります。私の場合、色は短時間で変化し、CSSの背景に戻ります。

$(function() { 
 
    $(".menu a").bind("click", function() { 
 
    $(".menu a").removeClass("clicked"); 
 
    $(this).addClass("clicked"); 
 
    }); 
 
});

.menu { 
 
    width: auto; 
 
    display: block; 
 
} 
 

 
.menu li { 
 
    display: inline; 
 
} 
 

 
.menu li a { 
 
    border: solid 2px white; 
 
    color: white; 
 
    text-decoration: none; 
 
    background: #a0a0a0; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.menu a.clicked { 
 
    background: #b34a4a; 
 
} 
 

 
.menu { 
 
    width: auto; 
 
    display: block; 
 
} 
 

 
.menu li { 
 
    display: inline; 
 
} 
 

 
.menu li a { 
 
    border: solid 2px white; 
 
    color: white; 
 
    text-decoration: none; 
 
    background: #a0a0a0; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.menu a.clicked { 
 
    background: #b34a4a; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="menu"> 
 
    <ul> 
 
    <li> <a href="">ITEM 1</a> 
 
     <a href="">ITEM 2</a> 
 
     <a href="">ITEM 3</a> 
 
     <a href="">ITEM 4</a> 
 
     <a href="">EXIT</a> 
 
    </li> 
 
    </ul> 
 
</div>

jsfiddleへのリンクを追加しました。

Answer 1

最初に欠けているのは、メニュー要素のhref属性です。あなたは、少なくとも「＃」にそれらを設定しない場合は、それらをクリックするとページがリロードされ、そのため彼らは、クラスを持っていない私はあなた

に別のJSを書いた

セカンドの事を「クリック」

$(function(){ $(".menu a").click(function() { 
    $(".menu a").removeClass("clicked"); 
    $(this).addClass("clicked"); 
    }); 
})