jquery效果代码,jquery 效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定

代码如下:

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

html

xmlns=""

head

titleJquery的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

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

相关问答

Q1: jQuery 页面加载等待特效，当数据加载完成效果消失的代码？

页面加载等待特效，当数据加载完成效果消失的代码如下:

$.ajax({

url:"",

type:"post",

data:{"xx":"xx"},

beforeSend:function(){

//这里是开始执行方法，显示效果，效果自己写

complete:function(){

//方法执行完毕，效果自己可以关闭，或者隐藏效果

success:function(){

//数据加载成功

error:function(){

//数据加载失败

}

});

Q2: jQuery实现的网页左侧在线客服效果代码

本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下：

这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

html

xmlns=""

head

title网页左侧浮动jquery在线QQ客服代码/title

style

*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}

QQbox

.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px

0;position:fixed;}

*html,

*html

body{background-image:url(about:blank);background-attachment:fixed;}

*html

.QQbox{position:absolute;

top:expression(eval(document.documentElement.scrollTop));}

.QQbox

.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}

.QQbox

.Qlist{float:left;width:410px;background:url(images/bj01.png)

no-repeat;background-position:1px

0px;height:436px;display:block;overflow:hidden;zoom:1;}

.QQbox

.Qlist

.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}

.QQbox

.Qlist

.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}

.QQbox

.Qlist

.con

li{height:31px;list-style:none;margin-left:35px;}

.QQbox

.Qlist

.con

a{font-size:13px;margin-left:18px;text-decoration:none;}

.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}

.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)

no-repeat;margin-top:-45px;margin-left:220px;}

/style

script

type="text/javascript"

src="jquery-1.6.2.min.js"/script

/head

body

div

id="divQQbox"

class="QQbox"

div

id="divOnline"

class="Qlist"

div

class="OnlineLeft"

div

class="con"

li售前咨询a

target="_blank"