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

忘是亡心i 2023-01-13 10:51 143阅读 0赞

大家先看看壹品集(只在文章页侧边栏上有)的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');

\});

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jq制作tab栏

相关 jq 实现简单tab切换

相关 jq实现tab选项卡

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

相关纯CSS实现Tab切换以及 CSS+JS实现Tab切换

相关 tab切换

相关 JQ实现——TAB选项卡切换登录界面

相关 jquery之tab样式切换

相关 jQuery 之 TAB切换菜单

相关 jQuery实现tab切换