菜单栏基于链接。单击时不会更改背景

Question

菜单栏基于链接列表。需要更改单击项目的背景颜色并保留它。在我的情况下，颜色会在短时间内发生变化并返回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

file://