Jquery滑动门/tab切换实现方法完整示例


Posted in jQuery onJune 05, 2020

本文实例讲述了Jquery滑动门/tab切换实现方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
 *{ margin:0; padding:0;}
 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:1px solid #898989; height:100px;}
 .hide{display:none}
</style>
<!--  引入jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" >
    $(function(){
      var $div_li =$("div.tab_menu ul li");
      $div_li.click(function(){
            $(this).addClass("selected")      //当前<li>元素高亮
                  .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
      var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")      //选取子节点。不选取子节点的话,会引起错误。如果里面还有div 
                    .eq(index).show()  //显示 <li>元素对应的<div>元素
                    .siblings().hide(); //隐藏其它几个同辈的<div>元素
        }).hover(function(){            //添加光标滑入滑出效果
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        })
    })
 
</script>
</head>
<body>
 
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div>时事</div>
         <div class="hide">体育</div>
         <div class="hide">娱乐</div>
    </div>
</div>
 
</body>
</html>

运行结果:

Jquery滑动门/tab切换实现方法完整示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
JQuery获得内容和属性方法解析
May 30 #jQuery
jQuery实现视频展示效果
May 30 #jQuery
You might like
php分页函数
2006/07/08 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
php cookie 详解使用实例
2016/11/03 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
js 对象是否存在判断
2009/07/15 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
深入理解NumPy简明教程---数组1
2016/12/17 Python
python 获取网页编码方式实现代码
2017/03/11 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python如何省略括号方法详解
2020/03/21 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
老干部工作汇报材料
2014/10/28 职场文书