jQuery+CSS实现滑动的标签分栏切换效果

前端技术 2023/09/07 JavaScript

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果。分享给大家供大家参考。具体如下：

运行代码如下

具体代码如下

<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>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18735

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案