<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 代码有条件地声明类之外，还有其他更简单的方法可以实现这一点吗？在此先感谢
$('.nav li:first').appendClass('active');
而不是这个，尝试
$('.nav li:first').addClass('active');
如果我想使用的链接更少，如下所示，
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');
}
});
});
我使用这个简单的模板标签：
# 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 正则表达式作为字符串来减少重复量。
试试这个而不是使用.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');
}
});
如果window.location真的符合你的href属性，我怀疑它，你可以直接选择它们：
$(document).ready(function(){
$('#nav li a[href="'+window.location+'"]').closest('li').addClass('active');
});