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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jquery 插件学习(六)
Aug 06 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript的==运算详解
Jul 20 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
简单了解JavaScript sort方法
Nov 25 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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/10/14 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
新年晚会主持词
2014/03/24 职场文书
中层干部培训方案
2014/06/16 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript