Use jquery to select the Li menu to achieve the effect of refreshing CSS

Source: Internet
Author: User

Requirements:

A page with the menu bar on the left and an IFRAME on the right. Click the menu on the left to load the corresponding page. At the same time, add the CSS selection effect to the selected menu.

 

Code

< Div ID = "Leftmenu" Class = "Menu" >
< Ul Style = "Overflow: visible ;" ID = "Menu_index" >
< Li > < A Target = "Main" Hidefocus = "True" Href = "Main.html" Class = "Selected" > Management Center Homepage </ A > </ Li >
< Li > < A Target = "Main" Hidefocus = "True" Href = "List.html" Class = "" > List display </ A > </ Li >
< Li > < A Target = "Main" Hidefocus = "True" Href = "" Class = "" > Product Management </ A > </ Li >
< Li > < A Target = "Main" Hidefocus = "True" Href = "" Class = "" > Announcement Management </ A > </ Li >
</ Ul >
< Ul Style = "Display: none" ID = "Menu_global" >
< Li > < A Target = "Main" Hidefocus = "True" Href = "Form1.html" > Form Control 1 </ A > </ Li >
< Li > < A Target = "Main" Hidefocus = "True" Href = "Form1.html" > Form Control 2 </ A > </ Li >
</ Ul >
</ Div >

 

 

After selecting the home page of the management center, add the CSS named selected to the price. If you select other items, add the CSS for the item and remove the selected CSS from other menus, you can add an ID to Li or a, and then add a click event to A. However, if the menu is not fixed or there are too many menus, it will be relatively troublesome. however, if this is the case, I have not been familiar with jquery for a long time, so I may not be able to keep up with the times.Code, Bind when loading.

 

$ ( Function (){
$ ( ' # Leftmenu ' ). Click ( Function (){
$ ( ' # Leftmenu ' ). Each ( Function (){
$ ( This ). Removeclass ( ' Tabon ' );
});
$ ( This ). Addclass ( ' Tabon ' );
});
})

 

 

I am entangled in the first sentence, every time I think about each, the results put me each in, and then found that you can directly click (quit) on $ ('# leftmenu ), traverse and delete the current CSS, and then add CSS to the click item. hi, depressed.

 

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.