基于jquery的淡入淡出选项卡效果代码

经典选项卡

.tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;}
.tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;}
.tab dt strong{padding:0 15px;color:#444;}
.tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;}
.tab dt a.on{background:#fff;color:#333;font-weight:bold;border-bottom:1px solid #fff;border-right:1px solid #ccc;border-left:1px solid #ccc;}
.tab dd{padding:10px;height:200px;clear:both;}

$(function(){
var tabTitle = ".tab dl dt a";
var tabContent = ".tab dl ul";
$(tabTitle + ":first").addClass("on");
$(tabContent).not(":first").hide();
$(tabTitle).unbind("click").bind("click", function(){
$(this).siblings("a").removeClass("on").end().addClass("on");
var index = $(tabTitle).index( $(this) );
$(tabContent).eq(index).siblings(tabContent).hide().end().fadeIn("slow");
});
});

经典选项卡手机卖场我们海澜男人精品居家
    1111111111111111111111
    www.jb51.net
    333333333333333333333
    444444444444444444

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 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"> <head> <title> jque

  • jQuery 淡入淡出、展开收缩菜单实现代码

    jQuery 淡入淡出、展开收缩菜单实现代码

    效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo

  • jquery实现通用版鼠标经过淡入淡出效果

    复制代码 代码如下: <a class="jq_btn" href="#"><div></div></a> //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(

  • jquery 淡入淡出效果的简单实现

    样式: 复制代码 代码如下: <style type="text/css">      #win {              width: 98%;             position: absolute;                  display: none;          float:left;          } /*控制关闭按钮的位置*/        #close {         margin-left: 155px;         c

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 基于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">  <head>  <meta http-equiv=

  • jQuery淡入淡出元素让其效果更为生动

    为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度.jQuery提供了3个和淡入淡出相关的函数: ·fadeIn()使得一个隐藏的元素淡入视野.首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走):然后,元素逐渐地变得可见.如果元素在页面上已经可见,则这个函数没有任何效果.如果没有提供一个速度值,元素使用"常规"设置来淡入(400毫秒). ·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它.如果元素在

  • 基于jQuery的淡入淡出可自动切换的幻灯插件

    其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 复制代码 代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jqu

  • 基于Jquery的淡入淡出的特效基础练习

    基于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"> <head>

  • jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法

    往带有png图的类里加红色字的部分 复制代码 代码如下: background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=sca

随机推荐