Question

我希望当我处理任何导航按钮时，它将是红色，而其他颜色将是相同的颜色..这里我有jstl标签..这就是为什么它不能在jsfiddle中工作这是问题吗？

＆＃13;

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

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

当您点击链接时：

启动一些JS
修改当前页面的DOM以更改类
完成运行JS
点击链接
放弃刚修改的DOM
使用新DOM

如果您想更改 new 页面中链接的类，您必须执行以下操作：

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

Answer 2

您需要更改几个地方作为起点。首先在html中，将当前更改为活动

<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

css代码不起作用

2 个答案: