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

代码如下:

<!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>

赞 (0)

相关推荐

  • 基于jquery实现图片广告轮换效果代码

    基于jquery实现图片广告轮换效果代码

    效果图:实现代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

  • jquery 轮换显示 第一小个例子

    jquery 轮换显示 第一小个例子

    效果如下图所示:虽然是看了示例之后自己在写的 (就当是给自己一个鼓励吧 加油!) jquery 复制代码 代码如下: $(document).ready(function(){ var h3=$(".accordion h3"); $(".accordion h3:eq(0)").addClass("active");//1.首先获取第一个H3标签添加class: $(".accordion p:gt(0)").hide();

  • JQuery分屏指示器图片轮换效果实例

    本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: <script type="text/javascript"> var curr = 0, next = 0, count = 0; $(document).ready(f

  • Jquery 实现图片轮换

    网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 页面+JS代码 复制代码 代码如下: <script

  • 基于jquery的热点内容轮换效果

    基于jquery的热点内容轮换效果

    效果图:核心代码: 复制代码 代码如下: <div class="blockB" collection="Y" > <h2><span>王牌栏目 Regular features</span></h2> <div id="regular_features" class="pp"> <div class="tabs"> <

  • JQUERY简单按钮轮换选中效果实现方法

    本文实例讲述了JQUERY简单按钮轮换选中效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按钮轮换点击效果</title> <script type="text/javascript" src=

  • jquery 图片轮换效果

    jquery 图片轮换效果

    效果图:代码中存在的错误欢迎大家指正 复制代码 代码如下: /** * @author leepood * @title 图片自动轮换效果 * @version v2.0 * @E-Mail leepood@gmail.com * @notice:要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数 */ function changeImages() { var setting={ 'width':'330px', 'height':'200px',

  • jquery实现简单的轮换出现效果实例

    本文实例讲述了jquery实现简单的轮换出现效果.分享给大家供大家参考.具体如下: <!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"> <h

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

    复制代码 代码如下: <!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>Jque

  • 通过jquery实现页面的动画效果(实例代码)

    有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

  • jQuery 中msgTips 顶部弹窗效果实现代码

    最近发现好多网站都采用顶部弹窗,并且不用用户手动去点击确定.感觉这样很方便用户,所以也找了好多大神的代码,整理一下方便以后查找 前端: @{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • jquery对输入框内容的数字校验代码实例

    这篇文章主要介绍了jquery对输入框内容的数字校验代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接在input属性框中添加keyup事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js&quo

  • 利用jQuery实现简单的拖曳效果实例代码

    前言 本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作. 操作设计的节点有:原节点,临时节点,新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现 相应的注释在文中已有体现,请认真观看,你可以理解的. 先定义一个对象 dr

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • 多浏览器兼容的qq图片轮换效果javascript代码

    多浏览器兼容的qq图片轮换效果javascript代码

    js图片轮换效果代码_我们 22吨重挖掘机 中星九号直播 考后表情 1 2 3 function $(v){return document.getElementById(v)} var img = $("bimg").getElementsByTagName("div"); var td = $("simg").getElementsByTagName("td"); var text = $("info")

  • jQuery导航条固定定位效果实例代码

    jQuery导航条固定定位效果实例代码

    实现效果图: 向下滑动时,导航栏固定 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search

随机推荐