Home > Web Front-end > JS Tutorial > body text

Detailed introduction on how JS realizes that the current menu in a multi-level menu does not change with the page jump style

黄舟
Release: 2017-06-01 10:21:39
Original
1307 people have browsed it

This article introducesJQuery cleverly realizes that the current menu in a multi-level menu does not change with the page jump style. The implementation method is very simple. Friends who are interested should take a look

1. Overview

This article introduces how JQuery cleverly implements the current menu in a multi-level menu without changing the page jump style. I don’t seem to understand what it means?

Look at the picture and talk: when you click on the second-level or multi-level menu, the parent is expanded, and the current menu is in the selected state. Do you understand now?

2. Application Scenario

When a project uses a public template file (as shown on the left in the figure above Side menu bar), when we add a link to each submenu, it will still be the style of the public template after clicking the page jump. At this time, we need to dynamically load the style of the current menu.

3. Implementation method

First method: Pass variables through php, and the template page receives these variables To realize whether the menu of the current page is selected or not, parent expansion and other styles

Disadvantages: Although the implementation is simple, each page requires PHP to pass variables, which is very cumbersome. This method is not recommended, so it will not be used anymore. Say no more!

Second: By comparing the href value of the a tag in the current menu with the value of the browser's url, determine whether the href attribute value in the a tag belongs to the browser url. part, which means that the menu containing the a tag should be selected, and then assign the style to the menu and the corresponding parent menu.

4. Give a chestnut

 <ul class="sidebar-menu">
  <li class="header">主菜单</li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-users"></i> <span>用户管理</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;agent&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 代理商</a></li>
   <li><a href="{{ path(&#39;client&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 委托人</a></li>
   <li><a href="{{ path(&#39;cs_staff&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 客服</a></li>
   <li><a href="{{ path(&#39;admin&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 管理员</a></li>
   </ul>
  </li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-bicycle"></i> <span>车辆管理</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;bike&#39;) }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车</a></li>
   </ul>
  </li>
  <li class="treeview">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   <i class="fa fa-fw fa-cny"></i> <span>统计报表</span>
   <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
   </span>
   </a>
   <ul class="treeview-menu">
   <li><a href="{{ path(&#39;report&#39;)}}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 单车收益</a></li>
   </ul>
  </li>
  </ul>
Copy after login

Note: The above style is the style of bootstamp

If the current page is an administrator page, add the attribute class="active" to the corresponding li, and the style of the parent ul is style="<a href="http://www.php.cn/wiki/927.html" target="_blank"> display</a>: none;" is modified to style="display: block;", and the parent of ul is added with the attribute class="active", which results in the effect shown in Figure 1.

The following is the js implementation code I wrote, which can be placed in the public js file

 var CURRENT_URL = window.location.href.split(&#39;?&#39;)[0];
 CURRENT_URL_ARR=CURRENT_URL.split("/",6); 
 for (i=0;i<CURRENT_URL_ARR.length ;i++ ){
 TEM_URL = CURRENT_URL_ARR.join(",");
 TEM_URL = TEM_URL.replace(/,/g,"/");
 $(&#39;.sidebar-menu&#39;).find(&#39;a&#39;).filter(function () {
  return this.href ==TEM_URL+"/";
 }).parent(&#39;li&#39;).addClass(&#39;active&#39;).parent(&#39;ul&#39;).css("display","block").parent(&#39;li&#39;).addClass(&#39;active&#39;);
 CURRENT_URL_ARR.pop();
 }
Copy after login

Explanation:

Line 1: Get the current url? The previous address, remove the url parameter

alert(CURRENT_URL);
Copy after login

, the result is:

http://partner.bike.lc/admin/
Copy after login

Line 2: Press "/" to split the url into string array , in order to accurately find the corresponding controller and method, the following 6 are set as needed

alert(CURRENT_URL_ARR);
Copy after login

. The result is:

http:,,partner.bike.lc,admin,
Copy after login

Line 3: LoopMatch url

Line 4: Convert the array into a string

aert(TEM_URL);
Copy after login
Copy after login

The results obtained by looping are:

http:,,partner.bike.lc,admin,
http:,,partner.bike.lc,admin
http:,,partner.bike.lc
...
Copy after login

Line 5: Convert the array to a string The string in the previous step is converted into URL form

aert(TEM_URL);
Copy after login
Copy after login

The results obtained by the loop are:

http://partner.bike.lc/admin/http://partner.bike.lc/adminhttp://partner.bike.lc
...
Copy after login

Lines 6-10: Traverse all a tags in the menu bar and determine whether the url in the loop is There is an href value equal to the a tag. If there is a required style,

Note:

this.href gets the complete URL address;

pop is used for Delete and return the last element of the array. This step is very important.

Okay, the above is the JS implementation introduced by the editor to you. The current menu in the multi-level menu does not change with the page jump style. I don’t know if you understand it. The main thing is to understand the implementation ideas, and the style can be adjusted according to your own situation~

The above is the detailed content of Detailed introduction on how JS realizes that the current menu in a multi-level menu does not change with the page jump style. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template