如何突出显示导航栏中的活动选项卡

Question

我想突出显示活动标签并在单击其他链接时将其移动

$(function() {
  $('.nav ul li').on('click', function() {
    $(this).parent().find('li.active').removeClass('active');
    $(this).addClass('active');
  });
});

.nav {
  background-color: #510A32;
  height: 120px;
  background: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 0;
}

.nav ul {
  list-style-type: none;
}

.nav li {
  float: left;
  padding: 30px 40px 70px 0px;
  font-family: Arial;
}

.nav li a {
  display: block;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
}

.nav ul li:hover a {
  color: gold;
}

li.active a {
  color: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav">

  <ul>

    <li class="active"><a id="home" href="#">Home</a></li>

    <li><a id="story" href="#">Our Story</a></li>

    <li><a id="Menus" href="#">Menus</a></li>

    <li><a id="OrderOnline" href="#">Order Online</a></li>

    <li><a id="contact" href="#contact">Contact & Reservations</a></li>

  </ul>

</div>

Answer 1

应用这可能可以解决您的问题

ul li a.active {
  color:blue;
  background:#ccc;
  text-decoration: underline;
}

html转到此处...

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#" >Services</a></li>
</ul>

JavaScript在这里

document.querySelector("a").addEventListener("click", function () {
    this.classList.toggle("active");
});