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仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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+DBM的同学录程序(1)
2006/10/09 PHP
header跳转和include包含问题详解
2012/09/08 PHP
在PHP中使用redis
2013/11/04 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
js实现购物车功能
2018/06/12 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
浅谈dataframe中更改列属性的方法
2018/07/10 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
了解一下python内建模块collections
2020/09/07 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
2014年最新学校运动会广播稿
2014/09/17 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
放弃继承权公证书
2015/01/23 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python