由于锚标记，刷新页面时文本突出显示不可见答案

【问题标题】：Text Highlight invisible on refreshing the Page due to anchor tag由于锚标记，刷新页面时文本突出显示不可见
【发布时间】：2013-12-19 10:23:50
【问题描述】：

我的导航栏在 django 项目中显示家庭、住宿、照片库、联系人等选项。

我想突出显示当前被点击的标签，但是由于锚标签，onClicking的变化是不可见的：

HTML 代码：

 <nav class="main-navigation">

      <ul id="navigation">
        <li class="current-menu-item current_page_item"><a href="{% url url_name m.vertical m.name 'home' %}"><strong>Home<span>welcome</span></strong></a>
         </li>
        <li class="current-menu-item current_page_item"><a href="{% url url_name m.vertical m.name 'accommodation' %}"><strong>Accommodation<span>rates &amp; reservation</span></strong></a>
          <ul class="sub-menu">
          {% for room in m.rooms %}
            <li><a href="{% url url_name m.vertical m.name 'accommodation-single' %}?id={{room.id}}">{{room.title}}</a></li> 
           {% endfor %} 
          </ul>
        </li>
        <li class="current-menu-item current_page_item"><a href="{% url url_name m.vertical m.name 'features' %}"><strong>Photo Gallery<span>Moments in Hotel</span></strong></a>
        </li>
        <!-- li><a href="{% url url_name m.vertical m.name 'events' %}"><strong>Occasions<span>upcoming events</span></strong></a></li-->
        <li class="current-menu-item current_page_item"><a href="{% url url_name m.vertical m.name 'contact' %}"><strong>Contact Us<span>get in touch</span></strong></a></li>
      </ul>

    <!-- .main-navigation -->
    </nav>

使用的jQuery：

<script type="text/javascript">
$(document).ready(function(){
 $('#navigation li').click(function() {
       console.log($(this))
        $(this).parent('ul').children('li').css('color','gray');
        $(this).css('color','red'); 
 });
});
</script>

在刷新页面中保持变化的任何技巧？

【问题讨论】：

应用 evt.preventDefault() 了解更多详情：api.jquery.com/event.preventDefault

标签： jquery django html

【解决方案1】：

显然这些更改不会产生任何影响，因为锚链接将执行新的 http 请求。您可以编写一个模板标签来检查特定链接是否处于活动状态，然后应用一些自定义样式：

from django import template
from django.core.urlresolvers import reverse

register = template.Library()

@register.assignment_tag(takes_context=True)
def is_link_active(context, *args, **kwargs):
    request = context['request']
    url = kwargs.pop('url', None)
    if not url:
        url_name = args.pop(0)
        url = reverse(url_name, args=args, kwargs=kwargs)
    if request.path == url:
        return True
    return False

然后在模板中你可以这样做：

{% is_link_active url_name m.vertical m.name 'contact' as active %}

<a href="{% url url_name m.vertical m.name 'contact' as active %}" {% if active %}style="color: red"{% endif %}>ABC</a>

OR

{% url url_name m.vertical m.name 'contact' as my_url %}
{% is_link_active url=my_url as active %}

<a href="{{ my_url }}" {% if active %}style="color: red"{% endif %}>ABC</a>

【讨论】：