页面美化——选中的板块变灰色
使用标签<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>
转载于:https://blog.51cto.com/devops2016/1764259