search

Home  >  Article  >  Web Front-end  >  jQuery+CSS implements sliding label column switching effect_jquery

jQuery+CSS implements sliding label column switching effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:25:151471browse

The example in this article describes the smooth scrolling label column switching effect achieved by jQuery. Share it with everyone for your reference. The details are as follows:

The running code is as follows

The specific code is as follows

<html>
 <head>
 <title>jQuery平滑滚动的标签分栏切换</title>
 <meta charset="gb2312">
 <style>
 ul,li{
 margin:0px;
 padding:0px;
 list-style:none
 }
 li{
 float:left;
 background-color:#8c6239;
 color:white;
 padding:5px;
 margin-right:2px;
 border:1px solid white;
 }
 li.myLi{
 background-color:#ea5500;
 border:1px solid #ea5500;
 }
 div{
 clear:left;
 background-color:#ea5500;
 color:white;
 width:300px;
 height:100px;
 padding:10px;
 display:none;
 }
 div.myDiv{
 display:block;
 }
 </style>
 <script src="./jquery-1.7.1.min.js"></script>
 <script>
 var timeId;
 $(document).ready(function(){
 $("li").each(function(index){
 //index是li数组的的索引值
 $(this).mouseover(function(){
 var liNode = $(this);
 //延迟是为了减少服务器压力，防止鼠标快速滑动
 timeId = setTimeout(function(){
  //将原来显示的div隐藏掉
  $("div.myDiv").removeClass("myDiv");
  //将原来的li的myLi去掉
  $("li.myLi").removeClass("myLi");
  //显示当前鼠标li的对应的div
  $("div").eq(index).addClass("myDiv");
  //增加当前li的myLi
  liNode.addClass("myLi");
 },300);
 }).mouseout(function(){
 clearTimeout(timeId);
 });
 });
 });
 </script>
 </head>
 <body>
 <ul>
 <li class="myLi">this is li 1</li>
 <li>this is li 2</li>
 <li>this is li 3</li>
 </ul>
 <div class="myDiv">this is div1</div>
 <div>this is div2</div>
 <div>this is div3</div>
 </body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
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
Previous article：Detailed explanation of primitive data types Null and Undefined in JavaScript_javascript techniquesNext article：Detailed explanation of primitive data types Null and Undefined in JavaScript_javascript techniques

Related articles

See more