【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>




你可能感兴趣的:(浏览器,python,Active)