Jquery的Tabs内容轮换效果实现代码,几行搞定


Posted in Javascript onFebruary 12, 2014
<!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>  
    <title>Jquery的Tabs内容轮换效果实现代码,几行搞定</title>  
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>  
  <style type="text/css">  
        * { margin:0; padding:0;}  
        body { font:12px Verdana, Geneva, sans-serif; color:#404040;}     
        .tabs { margin:10px 0 0 20px; width:360px; position:relative; overflow:hidden; height:1%; height:160px;}  
        .tabs span { z-index:2; font-size:12px; border:1px solid #d5d5d5; width:95px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px; cursor:pointer;}  
        span.active { background-position:0 -25px; background-color:#d5d5d5;}  
        #tab-01, #tab-02, #tab-03 { position:absolute; top:26px; left:0; width:338px; padding:10px; height:93px; border:1px solid #d5d5d5; z-index:1;}  
        #tab-02, #tab-03 { display:none;}  
    </style>  
    <script type="text/javascript">  
        $(document).ready(function () {  
            $('.tabs span').mouseover(function () {  
              //div隐藏
              $('.tabs div').hide();
              //查找.tabs span同辈元素span 后面紧邻的同辈元素div显示
              $(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();  
            });  
        });  
    </script>  
</head>  
<body>  
    <div class="tabs">  
        <!-- 默认第一个tab为激活状态 -->  
        <span class="active">热点新闻</span>  
        <div id="tab-01">news</div>  
        <span>娱乐新闻</span>  
        <div id="tab-02">enteriment</div>  
        <span>就业形势</span>  
        <div id="tab-03">jobs</div>  
    </div>  
</body>  
</html> 
Javascript 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
PassWord输入框代码分享
Jun 07 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 #Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 #Javascript
js弹出div并显示遮罩层
Feb 12 #Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
You might like
3款值得推荐的微信开发开源框架
2014/10/28 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
json的使用小结
2016/06/08 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
编程语言Python的发展史
2014/09/26 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python threading的使用方法解析
2019/08/28 Python
python pygame实现球球大作战
2019/11/25 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
网吧七夕活动策划方案
2014/08/31 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
党员承诺书格式范文
2015/04/28 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python