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 相关文章推荐
js清理Word格式示例代码
Feb 13 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript函数详解
Feb 27 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
layui的table中显示图片方法
Aug 17 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
全面分析JavaScript 继承
May 30 Javascript
vue实现分页栏效果
Jun 28 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
php批量上传的实现代码
2013/06/09 PHP
php生成excel文件的简单方法
2014/02/08 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python学习之os模块及用法
2020/06/03 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Java中实现多态的机制
2015/08/09 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
自荐信的格式
2014/03/10 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
发布会邀请函
2015/01/31 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers