2020-05-13--Django11--跳转列表项的优化,

2020-05-13  本文已影响0人  program_white

跳转列表项的优化


在之前由于css样式问题,这部分内容没有作为继承部分,而是分开在每个页面自己写,那么现在就要进行优化这个代码,让这部分作为继承部分。

删除子模版中的该部分插槽及内容,并在base中的删除该插槽,在插槽的位置写回原来代码,但是要加以改动。

我们要分析一下,要进行高亮的改变,要根据什么进行改变
他们这几个链接的不同就是url的不同,所以要根据跳转的路径进行判断css样式:

 {# 跳转链接列表 #}
            <nav>
                <div class="nav">
                    <div class="wp">
                        <ul>
                            <li class="{% if request.path == '/' %}active{% endif %} "><a href="{% url 'index' %}">首页</a></li>

                            <li class="{% if request.path|slice:'7' == '/course' %}active{% endif %} ">
                                <a href="{% url 'course:list' %}">
                                    公开课<img class="hot" src="{% static 'images/nav_hot.png' %}">
                                </a>
                            </li>

                            <li>
                                <a href="teachers-list.html">授课教师</a>
                            </li>

                            <li class="{% if request.path|slice:'4' == '/org' %}active{% endif %}"><a href="{% url 'org:list' %}">授课机构</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

解析:
在class属性中加入判断,如果request.path,也就是路径为所对应的路径时,那么显示active,在其他两项中要使用过滤器进行截取某几个字符串是否与之对应。

过滤器:request.path|slice:'7' == '/course':当路径的前七个字符串为/course时,显示active。

运行:



点击公开课:



成功显示。
上一篇 下一篇

猜你喜欢

热点阅读