Home > Developer > Web Develop
Information System navigation menu style implementation, information navigation menu style
Implementation menu effect: too many
The selected menu is green, and the remaining menu is gray.
Implementation Method: use images instead of text and css combinations for specific menus.
Main JS Code:
When you click the menu, traverse and remove the selected menu style, and then add the corresponding style of the new menu.
ChangeC (id, img );
Var index = img. indexOf (".");
Var imgPath = '<% = basePath %> images/menu/'{img.substring(0, index}}'{png ';
Document. getElementById (id). src = imgPath;
Traverse and remove existing menu styles
Function changeC (id, img ){
For (var I = 0; I <jQuery ("img"). length; I ++ ){
If (id! = JQuery ("img") [I]. id ){
Var path = jQuery ("img") [I]. src;
If (path. indexOf ("w")> 0 ){
Var index = path. indexOf ("w ");
Path = path. substring (0, index) + ". png ";
Document. getElementById (jQuery ("img") [I]. id). src = path;
}
}
}
}
The first menu is selected by default after login.
$ (Document). ready (function (){
If ($ ('. topmenu'). size ()> 0 ){
Var id = $ ('. topmenu') [0]. id;
Var img = $ ('. topmenu') [0]. src;
Var index = img. indexOf (".");
Var imgpath=img.substring(0, index+'{png ';
Document. getElementById (id). src = imgPath;
}
})
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script language = "javascript" type = "text/javascript">
Var $ c = function (array) {var nArray = []; for (var I = 0; I <array. length; I ++) nArray. push (array [I]); return nArray ;};
Array. prototype. each = function (func) {for (var I = 0, l = this. length; I <l; I ++) {func (this [I], I );};};
Document. getElementsByClassName = function (cn ){//
Var hasClass = function (w, Name ){
Var hasClass = false;
W. className. split (''). each (function (s ){
If (s = Name) hasClass = true;
});
Return hasClass;
};
Var elems = document. getElementsByTagName ("*") | document. all;
Var elemList = [];
$ C (elems). each (function (e ){
If (hasClass (e, cn) {elemList. push (e );}
})
Return $ c (elemList );
};
Window. onload = function (){
Var a = document. getElementsByClassName ("nav") [0]. getElementsByTagName ("");
For (var I = 0; I <a. length; I ++ ){
A [I]. onfocus = function () {this. blur ();}
A [I]. onc ...... remaining full text>
How does javascript control the navigation menu style of the current page?
Each li you give an ID, and each referenced page uses a js id to add multiple styles to the li you want to change the style.
What else can be used to determine whether each reference page and js are used to load the public page? It seems that you have to load the details page of the home page. Your navigation can be public, but js needs to write for each page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
