Question

在我的Django模板中，我有几个由上下文变量填充的导航标签：

<div class="content-object">
    <ul class="nav nav-tabs nav-fill" id="object_tab" role="tablist">
      {% for object in object_list %}
        {% if object == object_list.0 %}
          <li class="nav-item active">
            <a href="{% url 'object_contents' %}?object={{object}}" class="nav-link" data-target="#chartdiv" role="tab"
            aria-selected="true">
              {{object}}
            </a>
          </li>
        {% else %}
          <li class="nav-item">
            <a href="{% url 'object_contents' %}?object={{object}}" class="nav-link" data-target="#chartdiv" role="tab"
            aria-selected="true">
              {{object}}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
</div>

在上面的代码中，我将第一个列表导航项设置为活动状态，即以蓝色突出显示。

但是，当我单击任何其他导航选项卡时，其类别变为“活动”状态，并且另一个选项卡被突出显示，但不执行与之关联的href链接。

<script>
  $(document).ready(function (){
      $('.nav-tabs > li > a').click(function(event){
        event.preventDefault();
        var actived_nav = $('.nav-tabs > li.active');
        actived_nav.removeClass('active');
        $(this).parents('li').addClass('active');
       }); 
   });
</script>

我不确定为什么不执行其href单击。

另外，这是我为ul，li设计的CSS样式：

.object-domain > .nav-tabs > li > a,   
.object-domain > .nav-tabs > li > a:focus{
  background-color: white;
  color: black;
  border: 1px solid black;
}

.object-domain > .nav-tabs > li > a:hover{
    color: blue;
    border: 1px solid black;
}

.object-domain ul > li.active > a{
    background-color: blue;
    color:white;
}

Answer 1

这是因为您有event.preventDefault()。如果单击a，则将阻止其默认操作。删除此行将解决您的问题：

$(document).ready(function (){
    $('.nav-tabs > li > a').click(function(event){
        var actived_nav = $('.nav-tabs > li.active');
        actived_nav.removeClass('active');
        $(this).parents('li').addClass('active');
        window.location.href = event.target;
    }); 
});

Answer 2

您只需在 li 标签中添加 if 条件。我不知道django请原谅我任何与语法相关的错误。没有使用onstrong上的 anchor 标记，因为您希望在单击链接时重定向到给定的URL。

<div class="content-object">
<ul class="nav nav-tabs nav-fill" id="object_tab" role="tablist">
  {% for object in object_list %}
    <li class="nav-item {% if object == request.GET.get('object') %} active {% endif %} ">
        <a href="{% url 'object_contents' %}?object={{object}}" class="nav-link" data-target="#chartdiv" role="tab"
        aria-selected="true">
          {{object}}
        </a>
      </li>
  {% endfor %}
</ul>

jQuery导航选项卡onclick函数不起作用

2 个答案: