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

时间:2015-09-01 00:55:45

标签: html css

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

<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样式,以便人们知道他们正在查看哪个项目。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

尝试将选择器$("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>

答案 2 :(得分:-1)

执行以下操作也可以:

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

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

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