Jquery implements slide navigation and jquery slide navigation
Implement tree navigation using Jquery
Show the effect?
When I move the mouse over the navigation bar, the image below changes as the mouse moves.
Implementation
1. Find the object to be operated and add the corresponding event
2. Add a style for the current object:
Methods
$ () AddClass () Short for jqerry () add style siblings () Brothers removeClass () Remove style index () index function () function eq () Select
Here I wrote a question about the effect of moving the image with the mouse sliding
Jquery slide navigation
<Title> Document </title>
<Style>
* {Margin: 0;
Padding: 0;
}
. Warp {width: 560px; height: 215px; border: 1px solid gray ;}
. Nav li {
List-style: none; float: left;
Padding-left: 5px; width: 93.3px; height: 30px;
Line-height: 30px;
Text-align: center; border: 1px solid gray;
Box-sizing: border-box;
}
. Con. show {
Display: block;
}
. Con div {
Display: none;
}
. Selected {
}
</Style>
</Head>
<Body>
<Div class = "warp">
<Div class = "nav">
<Ul>
<Li> healthy </li>
<Li> seckilling </li>
<Li> color TV </li>
<Li> mobile phone </li>
<Li> air conditioner </li>
<Li> electrical appliance </li>
</Ul>
</Div>
<Div class = "con">
<Div class = "show"> </div>
<Div> </div>
<Div> </div>
<Div> </div>
<Div> </div>
<Div> </div>
</Div>
</Div>
<Script type = "text/javascript" src = "js/jquery-3.2.1.js"> </script>
<Script>
$ (". Nav li"). mousemove (function (){
$ (This). addClass ("selected"). siblings (). removeClass ("selected ");
Var I = $ (this). index ();
$ (". Con div"). eq (I). addClass ("show"). siblings (). removeClass ("show ");
});
</Script>
</Body>
</Html>
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
