【python项目实战】BBS论坛（4）尝试页面美化

页面美化――选中的板块变灰色

    使用标签<li class="active"> </li>

    需要把显示的板块名元素，addClass("active")

    那就需要找出当前显示的板块名称是哪个？

    板块显示是根据板块id来设计url的，那通过获取当前页面url的path就能找到是哪个板块了

    使用的变量是――{{ request.path }}

    

要找到匹配标签的表达式：$("#navbar a[href='{{ request.path }}']")[0]，可以通过浏览器调试模式console来测试

测试步骤：

>$("#navbar a")                         #匹配出这么多标签,放在一个list里面

[<a href="/">综合讨论区</a>, <a href="/category/1/">DOTA1</a>, 
<a href="/category/2/">DOTA2</a>, <a href="/category/3/">LOL</a>, 
<a href="/category/4/">星际争霸</a>, 
<a href="./Fixe.....">…</a>, 
<a href>中单</a>, <a href>后期</a>, <a href>辅助</a>]

>$("#navbar a[href='/category/1/']")    #匹配到/category/1/ 标签

[<a href="/category/1/">DOTA1</a>]

$("#navbar a[href='/category/1/']")[0]       #取出list里面的第一个元素，就是html元素

>var menus = $("#navbar a[href='/category/2/']")[0]       #对第一个元素赋值给对象
undefined

>$(menus).parent()                                        #获得对象menus的父标签
[<li>…</li>]

#在父标签里面加入 class=“active”
$(menus).parent().addClass("active");               




#在其它同胞标签里面去除  class=“active”
$(menus).parent().siblings().removeClass("active");

最终实现方法：

<script type="text/javascript">
        $(document).ready(function(){

            var menus = $("#navbar a[href='{{ request.path }}']")[0];
            $(menus).parent().addClass("active");
            $(menus).parent().siblings().removeClass("active");
            console.log(menus);
        })

    </script>