Click "Reconstruction of the selected effect" in the navigation bar and click "Reconstruction of the selected effect" in the navigation bar.

Click "Reconstruction of the selected effect" in the navigation bar and click "Reconstruction of the selected effect" in the navigation bar.
I. Scenarios

Recently, a refactoring feature is that different styles are displayed after you click the link:

The Code is as follows. After I modify the style layout, use the bootstrap framework.

<! DOCTYPE html> Now we will focus on the implementation of the function.

The original code implements the link click style in this way, giving each link a different class,

<li class="menu01"><a href="page1.html">page1</a></li><li class="menu02"><a href="page2.html">page2</a></li><li class="menu03"><a href="page3.html">page3</a></li>

The following is defined on the page1.html page:

.menu01{background-color:#5dc1d1;border-radius:4px;}

The definition on the page2.html page is as follows:

.menu02{background-color:#5dc1d1;border-radius:4px;}

On the page3.html page, define:

.menu03{background-color:#5dc1d1;border-radius:4px;}

Menu is a public module of page1.html, page2.html, and page3.html, which is shared by include. In this way, the style of other links does not take effect when different pages are called. Therefore, different styles can be displayed on the clicked link.

However, this approach is very bad. If a style has multiple pages, it will be overwritten several times. Different class names correspond to the same style.

Such code is intolerable. The following uses a short section of js to implement the same function.

Ii. Rebuilding with js

The Code is as follows:

<! DOCTYPE html> 
Iii. Similar effects

The implementation method is as follows: add an active style to the user request url and the user request url.
<Div class = "btn-toolbar"> <div class = "btn-group"> {% url "addpermissionurl" as theaddpermissionurl %} <a class = "btn-default {% if request. path = theaddpermissionurl %} active {% endif %} "href = {theaddpermissionurl }}> <span class =" glyphicon-edit "> </span> Create permission </ >{% url "listpermissionurl" as thelistpermissionurl %} <a class = "btn-default {% if request. path = thelistpermissionurl %} active {% endif %} "href ={{ thelistpermissionurl }}> <span class =" glyphicon-list "> </span> permission list </> </div>
 
 
 
Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.