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


Posted in Javascript onDecember 17, 2015

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

运行代码如下

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

具体代码如下

<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程序设计有所帮助。

Javascript 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
js 字符串操作函数
Jul 25 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 #Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
js实现文字闪烁特效的方法
Dec 17 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
CI框架表单验证实例详解
2016/11/21 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
python追加元素到列表的方法
2015/07/28 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python3实现飞机大战
2020/11/29 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
简历中求职的个人自我评价
2013/12/03 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
银行稽核岗位职责
2015/04/13 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
上班旷工检讨书
2015/08/15 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS