Question

所以基本上如果你想在你当前所在页面的链接上有一个指标，你只需在页面上应用一种风格，例如：

<li><a href="home.aspx" class="active">HOME</a></li>
<li><a href="about.aspx">ABOUT</a></li>
<li><a href="contact.aspx">CONTACT</a></li>

当您在active页面时，它将应用课程home.aspx上的任何样式......

现在我有类似的东西，但这一次，链接只会重定向到同一页面，而是使用查询字符串进行过滤...

我有：

<li><a href="projects.aspx?id=PROJECT1">PROJECT 1</a></li>
<li><a href="projects.aspx?id=PROJECT2">PROJECT 2</a></li>
<li><a href="projects.aspx?id=PROJECT3">PROJECT 3</a></li>

我想要发生的是当我点击其中一个链接时我想要应用css样式，以便人们知道他们正在查看哪个项目。

Answer 1

只需添加一个小jquery即可将。active类添加到所选元素。

<script>
  jQuery(function($){
  var url = window.location.href;
  // give the li or a tag a class
     $('.element-class-name a[href="'+ url +'"]').addClass('active');

     $('.element-class-name a').filter(function() {

     return this.href == url;
    }).addClass('active');
});
</script>

Answer 2

尝试将选择器$("a[href^=projects]")缓存为变量，将click事件附加到缓存选择器，利用.each()迭代集合中的所有元素，将className设置为"active" if this当前元素=== event.target

var a = $("a[href^=projects]");
a.click(function(e) {
  a.each(function() {
    this.className = this === e.target ? "active" : ""
  })
})

var a = $("a[href^=projects]");
a.click(function(e) {
  // Note, `e.preventDefault()` included for stacksnippets
  e.preventDefault();
  a.each(function() {
    this.className = this === e.target ? "active" : ""
  })
})

a.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="projects.aspx?id=PROJECT1">PROJECT 1</a>
  </li>
  <li><a href="projects.aspx?id=PROJECT2">PROJECT 2</a>
  </li>
  <li><a href="projects.aspx?id=PROJECT3">PROJECT 3</a>
  </li>
</ul>

Answer 3

执行以下操作也可以：

$('.link').on('click', function(e) {
  $('.links li .link').removeClass('active');
  $(this).addClass('active');
});

如果链接是类，我在名为links的列表中给出了实际链接。

示例如下：http://codepen.io/anon/pen/OyJgBQ

如何在带有查询字符串的链接上应用样式

3 个答案: