jq实现tab转换 php,WordPress之超酷Tab切换代码

大家先看看壹品集(只在文章页侧边栏上有)的tab切换效果,是不是觉得还不错,其实这只是一个简单的jQuery Tab切换效果,虽然很简单,但是却很实用。如果大家对此感兴趣,可以照着下面的方法折腾一番。

由于它是jQuery效果,所以首先一点,要确保你的WordPress主题加载了jQuery运行库。

关于加载jQuery库可以参考下面的方法,如果你的主题已经加载了jQuery库,那跳过吧!

一、在header.php的head标签中加载jQuery库(非加不可):

当然,如果你觉得你的主机比GG更稳定更速度,那放本地也行的!

二、添加利用这个库让元素动起来的代码(可理解为命令代码):

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

上面这段就是一个让滑动按钮起作用的jQuery代码,那我们又该如何使用这个代码呢?有二个方法:

1.直接在header.php添加如下结构的代码:

jQuery(document).ready(function($){ //注意要用这个把jQuery代码都包裹起来,不然里面的可都是无效的哦~

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

//代码段二……

//代码段三……

});

2.推荐把方法1说的代码另存为.js文件:

jQuery(document).ready(function($){

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

});

然后再在header.php的head标签中添加:

注意把上面的XXOO换成你的网站的路径哦。

现在加载完了jQuery库,那继续来实现jQuery tab菜单切换效果。把下面代码放在你想要实现tab切换效果的地方,如:sidebar等位置:

一、HTML代码结构

说明:#tab-title是标题,#tab-content是对应的内容(其中三个ul内的代码是WP Kit CN插件调用相应标题内容的)。如果你要显示4个内容,则在标题和内容分别添加一个span和ul即可!

二、CSS美化代码

#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}

#tab-title h3{color:#666;font-size:15px;font-weight:400;}

#tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/

#tab-title span{padding:5px 9px 5px 10px;border:1px solid #ccf;border-right:0px;margin-left:-1px;cursor:pointer;}

#tab-content .hide{display:none;} /*默认让第一块内容显示,其余隐藏*/

#tab-content ul{padding:5px 10px;overflow:hidden;}

#tab-content ul li{padding-top:5px;height:20px;}

关于css,不同主题有不同处理方法,自己修改吧。

完成这步,效果是已经出来了,只是切换的这个功能还没有。那让我们一起有请强大利器出场!

三、jQuery控制代码

$('#tab-title span').mouseover(function(){

$(this).addClass("selected").siblings().removeClass();

$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();

});

这是一段jQuery裸代码,关于怎么运用到文件中去,请看上面部分

稍微陈述下控制代码的运作过程:鼠标移到一个标题(#tab-title span)时,该标题添加被选中(.selected)的效果,其他标题移除被选中的效果;同时,获取标题被选择的序号(.eq()),让内容中对应的子项(#tab-content ul)显示,其余子项隐藏。

更改为点击标题切换,而且内容显示方式改用slideUp/slideDown。

$('#tab-title span').click(function(){

$(this).addClass("selected").siblings().removeClass();

$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值