"Python Project Combat" BBS Forum (4) Try to beautify the page

Page beautification--The selected plate becomes gray

Using tags <li class= "active" > </li>

Need to put the displayed plate name element, addclass ("active")

Then we need to find out which plate name is currently displayed.

The plate display is based on the plate ID to design the URL, that by obtaining the current page URL of the path can find which plate is

The variable used is--{{Request.path}}

To find the expression that matches the label: $ ("#navbar a[href= ' {{Request.path}} ']") [0], which can be tested by the browser debug mode console

Test steps:

>$ ("#navbar a") #匹配出这么多标签, placed in a list [<a href= "/" > General discussion Area </a> <a href= "/CATEGORY/1 /">DOTA1</A>, <a href="/category/2/">DOTA2</A> <a href="/category/3/">LOL</A> <a href= "/category/4/" > StarCraft </a> <a href= "./fixe ..." >...</A> <a href> in single </a> <a href> late </a> <a href> auxiliary </a>]

>$ ("#navbar a[href= '/category/1/']") #匹配到/category/1/label [<a href= "/category/1/" >DOTA1</A>]

$ ("#navbar a[href= '/category/1/']") [0] #取出list里面的第一个元素, HTML element

>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");

The final implementation method:

<script type= "Text/javascript" > $ (document). Ready (function () {var menus = $ ("#navbar a[href= ' {{RE            Quest.path}} '] ") [0];            $ (menus). Parent (). addclass ("active");            $ (menus). Parent (). siblings (). Removeclass ("active");        Console.log (menus); }) </script>

This article is from the "Seeworld" blog, make sure to keep this source http://depops2016.blog.51cto.com/4205997/1764259

Python project actual combat BBS Forum (4) try page beautification