have been using the navigation bar menu options to switch, the use of js,jquery implementation of the corresponding code. The following shows the use of JS implementation switch:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Test</title> <styletype= "Text/css">#container{width:1100px;margin:0 Auto;}Header{Display:Block;width:100%;Height:90px;position:relative;}#logo{Margin-top:30px;float: Left;}nav{Display:Block;float: Right;Margin-top:37px;}Nav ul Li{List-style:None;float: Left;Margin-left:45px;}Nav ul Li a{text-decoration:None;Color:#5e5d5d;font-size:14px;}. Selected,header ul li A:hover{Color:#ff4242;} </style></Head><Body><!--The Header section - <Header> <DivID= "Container"> <!--Logo - <ahref="#"ID= "logo"> </a> <!--Navigation Menu - <nav> <ul> <Li><ahref="#"class= "Selected">Home</a></Li> <Li><ahref="#">About</a></Li> <Li><ahref="#">Team</a></Li> <Li><ahref="#">Journal</a></Li> <Li><ahref="#">Contact</a></Li> </ul> </nav> </Div> </Header> <Scriptsrc=".. /js/jquery.js "></Script> <Scripttype= "Text/javascript"> $("Nav ul Li a"). Click (function() { if(!$( This). Hasclass ('selected')){ $( This). addclass ('selected'); } $( This). Parent ('Li'). Siblings ('Li'). Find ('a'). Removeclass ('selected'); }); </Script> </Body></HTML>
Change the path of jquery to the local jquery file path, as follows:
A simple navigation menu toggles the display
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
