Django框架-选项卡加active类的方案

阅读目录

• 一、选项卡加active类，jq操作解决方案一
• 二、通过django设置block来解决方案二

回到顶部

一、选项卡加active类，jq操作解决方案一

-----html片段
{#左侧边栏#}
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li ><a href="{% url 'app_crm:customer_info' %}">公共客户信息库 <span
                        class="sr-only">(current)</span></a></li>
                <li><a href="{% url 'app_crm:my_customer' %}">我的客户</a></li>
                <li><a href="#">老师</a></li>
                <li><a href="#">学生</a></li>
            </ul>
        </div>

----jq解决
<script>
    $(".sidebar a").each(function () {
        if (location.href.indexOf(this.href) === 0) {
            console.log($(this));
            $(this).parent().addClass('active')
        }
    })
</script>

回到顶部

二、通过django设置block来解决方案二

在母版中每一个li标签class处设置一个block
在子页中引用每个block，将需要加active的block改变，其它清空
例如：母版中

<li class="{% block stu_active %}active{% endblock %}"><a href="">经销商</a></li>
<li class="{% block tea_active %}{% endblock %}"><a href="">厂商</a></li>
<li class="{% block cus_active %}{% endblock %}"><a href="">客户</a></li>

子页中应用，如现在打开的是厂商页面，按顺序设置，需要就加active，不需要就引用置空，不引用按母版默认

{% block stu_active %}{% endblock %}
{% block tea_active %}active{% endblock %}
{% block cus_active %}{% endblock %}

综上所述：

django方案麻烦

jq完胜