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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php实现加减法验证码代码
2014/02/14 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Android分包MultiDex策略详解
2017/10/30 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
计算机开发个人求职信范文
2013/09/26 职场文书
《都江堰》教学反思
2014/02/07 职场文书
讲座主持词
2014/03/20 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
求职信格式范文
2015/03/19 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python