使导航按钮突出显示

Question

我有两个导航按钮

我需要在单击时将一个导航按钮的背景颜色更改为橙​​色，并保持不变，直到另一个按钮被点击，我尝试了一些javascript代码，但没有按照简单的方式实现它。

  <div>
        <ul class="tab">
          <li><a href="register.php" >Job Seeker</a></li>
          <li><a href="company.php" >Company</a></li>
        </ul>
    </div>

Answer 1

就像在style.css文件中添加几行一样简单

例如：

    a:active { 
    background-color: yellow;
    }

Answer 2

如果你要查看一个javascript解决方案，它只需将点击的元素切换到给定的类，并从所有其他菜单元素中删除相同的类。纯CSS解决方案更优雅，但这种方式也有效。此外，如果您正在执行诸如切换内容div的可见性（或通过ajax为每个单击的导航项获取内容）之类的操作，这将为您提供一个方便的位置来挂钩该功能。

请注意，虽然我确实使用了jQuery，但如果愿意的话，可以通过纯javascript轻松完成。 jQuery只允许进行RAPID原型设计。

＆＃13;

＆＃13;

$(".nav-pane li").on("click", function(){
  $(this).addClass("clicked")
         .siblings().removeClass("clicked");
});

＆＃13;

.nav-pane ul {
  background-color: #4059b2;
  width: 100%
  list-style-type: none;
}
.nav-pane ul li {
  display: inline-block;
  padding: 0px;
  width: 24%;
  height: 20px;
}
.nav-pane ul li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  color: white;
}

.nav-pane ul li.clicked {
  background-color: #ff8605;
}
.nav-pane ul li.clicked a {
  color: #4059b2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-pane">
  <ul class="tab">
    <li><a href="#">Job Seeker</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;