CSS代码不起作用

Question

我希望当我在任何导航按钮上工作时，它都是红色的，而其他的颜色是相同的..这里我有 jstl 标签..这就是为什么它在 jsfiddle 中不起作用..where问题出在哪里？

$(document).ready(function(e) {
  $("ul li a").click(function() {
    $("nav a").removeClass("active");
    $(this).addClass("active");
  });
});

body {
  width: 100%;
  line-height: 1;
}
header {
  background: #fff;
  width: 100%;
  height: 76px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
a.active {
  color: red;
}
nav {
  float: right;
  padding: 20px;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
  float: left;
  padding: 10px
}
.current {
  color: red;
}
@media only screen and (max-width: 640px) {
  header {
    position: absolute;
  }
  #menu-icon {
    display: inline-block;
  }
  nav ul,
  nav:active ul {
    display: none;
    position: absolute;
    padding: 20px;
    background: #fff;
    border: 5px solid #444;
    right: 20px;
    top: 60px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
  nav:hover ul {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="<s:url value='/home'  />" class="current">Home</a>
      </li>
      <li><a href="<s:url value='/work' />">work</a>
      </li>
      <li><a href="<s:url value='/others' />">Others</a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

当您点击链接时：

1. 启动一些 JS
2. 修改当前页面的DOM来改变类
3. 完成运行 JS
4. 点击链接
5. 丢弃刚刚修改的 DOM
6. 使用新 DOM 加载新页面

如果您想更改新建页面中链接上的类，您必须这样做：

• 在将页面发送到客户端之前（这可以使用服务器端代码或硬编码为静态 HTML）
• 通过使用 JavaScript 检查location，找到匹配的href，然后修改该元素。

Answer 2

作为起点，您需要更改几个地方。首先在 html 中，将 current 更改为 active

<li><a href="..." class="active">Home</a></li>

在 JS 中，

$(document).ready(function(e) {   
    $("ul li a").click(function(){
        $("ul li a").removeClass("active");
        $(this).addClass("active");
    });
});

jsfiddle