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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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数据类型转换
2014/01/09 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
vue实现微信分享功能
2018/11/28 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python安装gdal的两种方法
2019/10/29 Python
Python无损压缩图片的示例代码
2020/08/06 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
密封类可以有虚函数吗
2014/08/11 面试题
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年采购工作总结
2015/04/10 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript