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 相关文章推荐
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
javascript常用代码段搜集
Dec 04 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
js获取Get值的方法
Sep 29 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
Angular6新特性之Angular Material
Dec 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效率,提高php性能的一些方法
2011/03/24 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
Mac下安装vue
2018/04/11 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python中sleep函数用法实例分析
2015/04/29 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
个人求职信范例
2014/01/29 职场文书
党建目标管理责任书
2014/07/25 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
初一数学教学反思
2016/02/17 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android