动态添加类

Question

的HTML

 <ul class="nav">
   <li class=""><a href="/home/">Home</a></li>
   <li><a href="/about/">About</a></li>
   <li><a href="/contact/">Contact</a></li>
 </ul>

脚本

  $(document).ready(function(){
    if(window.location=='/home/'){
       $('.nav li:first').appendClass('active');
     }
//---and similarly for other divs or 
  });

疑问

除了使用嵌入的django代码有条件地声明类之外，还有其他更简单的方法来实现这一点，提前感谢

Answer 1

 $('.nav li:first').appendClass('active');

而不是这个，试试

 $('.nav li:first').addClass('active');

Answer 2

如果我将使用的链接更少，

var links = ['/home/', '/about/', '/contact/' ];

$(document).ready(function(){
   var idx = $.inArray(window.location, links);
   $('.nav li').eq(idx).addClass('active');
});

如果你有很多链接..那就试试下面..

$(document).ready(function(){
   var curLink = window.location;

   $('.nav li').each(function () {
      if (curLink == $(this).find('a').attr('href')) {
        $(this).addClass('active');
      }
   });
});

Answer 3

我使用this simple template tag：

# app/templatetags/menu.py
from django import template
register = template.Library()

@register.simple_tag
def active(request, pattern):
    import re
    if re.search(pattern, request.path):
        return ' class="active"'
    return ''

# your_template.html
{% load menu %}
<ul class="nav">
    <li{% active request "^/home/$" %}><a href="/home/">Home</a></li>
    <li{% active request "^/about/$" %}><a href="/about/">About</a></li>
    <li{% active request "^/contact/$" %}><a href="/contact/">Contact</a></li>
</ul>

可以进行一些改进，特别是通过在模板标签中使用reverse()而不是将URL正则表达式作为字符串来减少重复次数。

Answer 4

尝试此操作而不是使用.appendClass(...)：

 $(document).ready(function(){
     if(window.location=='/home/'){
        $('.nav li:first').addClass('active');
     }
 });

然后，如果您在编写时有更多不同类型的元素并希望它们具有.active类，请执行以下操作：

$(document).ready(function(){

    //x: group all 'div' elements.
    var x = $('div');
    //y: group all 'p' elements
    var y = $('p');
    //All elements:
    var combined = x.add(y);

    if(window.location=='/home/'){
      combined.addClass('active');
    }

});

Answer 5

如果window.location与您的href属性完全匹配，我怀疑它是什么，您可以直接选择它们：

$(document).ready(function(){
    $('#nav li a[href="'+window.location+'"]').closest('li').addClass('active');
});​