jquery – 突出显示侧栏中的当前菜单项

前端之家收集整理的这篇文章主要介绍了jquery – 突出显示侧栏中的当前菜单项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Twitter Bootstrap上使用 django.我当前的视图类似于 examples provided之一.查看示例,可以想象用户单击侧栏中的一个链接以查看不同的视图,每个视图都使用相同的侧边栏框架.可以想象,所选链接将被突出显示,就像使用代码的示例一样:
<li class="active"><a href="/sample/link/here/">Link</a></li>

活动类需要附加到正确的菜单项.如何将此“活动”类分配给正确的菜单项?最初,我尝试使用视图中的变量为jquery分配它:

$(document).ready(function() {
    $("#{{ current_view }}_nav").addClass('active');
});

<li id="linkone_nav"><a href="/sample/link/here/">Link</a></li>

这看起来很麻烦.它要求我从视图中将id传递给模板.还有很多要管理的ID.是否有更好/更优先的方式来分配此活动类?

解决方法

我认为你在示例代码中使用#作为href会使问题蒙上阴影.我假设您的真实场景是实际的真实链接,并根据活动URL自动突出显示它们.如果这是正确的,那么就这样做:
{% url something as url %}
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Link1</a></li>

其中,“something”是urlpattern的名称或视图的虚线路径等.这假设您正在反转URL,显然,如果您使用静态URL,则只需对其进行硬编码:

<li{% if request.path == "/my/full/url/path/" %} class="active"{% endif %}><a href="/my/full/url/path/">Link1</a></li>
原文链接:https://www.f2er.com/jquery/177725.html

猜你在找的jQuery相关文章