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


    使用标签<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>