• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.
  • 本站系统镜像均来自于官方原版,ed2k可视为P2P下载链接。所有操作系统默认均为试用版,如有正版密钥可以有效激活,本站不提供任何激活和相关服务。

WordPress 非插件实现侧栏等地方Tab切换的效果及代码

WP插件 奇跡の海 1年前 (2017-04-27) 126次浏览 已收录 0个评论 扫描二维码

WordPress 非插件实现侧栏等地方 Tab 切换的效果及代码

前言

这个貌似用到的博客挺多的,像我的博客右侧(最新日志,热评日志,随机日志)这三个栏目就有用到了这种效果,好处是比较省地方,侧栏太长影响和谐啊,这个东西还挺不错的,其实实现起来挺简单的,下面来说下代码实现这种效果的方法,供大家参考下。

实现方法

其实这个不仅可以用于侧栏、底栏、头部都没有问题的,只需要稍微调整下格式即可,下面通过示例说下实现的方法。

首先,在需要他显示的地方加入以下代码,如下:

<div class="widget_tabcontent">
<h3><span class="selected">最新文章</span>
<span>最热文章</span>
<span>随机文章</span></h3>
<ul>插入要调用的函数</ul>
<ul class="hide">插入要调用的函数</ul>
<ul class="hide">插入要调用的函数</ul>
</div>

其次,引入加载 JS 文件,这个挺小的,直接贴代码,适当的位置调用即可,代码如下:

&lt;script type=&quot;text/javascript&quot;&gt;
 jQuery(document).ready(function($){
 //注意要用这个把 jQuery<a href="http://www.seaomc.com/archives/tag/dm" title="查看更多关于代码的文章" target="_blank">代码</a>都包裹起来,不然里面的可都是无效的哦~
$('.widget_tabcontent h3 span').click(function(){
    $(this).addClass(&quot;selected&quot;).siblings().removeClass();
    $(&quot;.widget_tabcontent &gt; ul&quot;).slideUp('1500').eq($('.widget_tabcontent h3
span').index(this)).slideDown('1500');
});
});
&lt;/script&gt;

注意:默认的是点击切换特效,如果喜欢,也可以改成鼠标移动指向自动切换的,将 click(function()中的 click 改成 mouseover 即可(如 Timle.CN 站点右侧采用的 mouseover 方式),显示方式修改 slideUp/slideDown 即可。

最后,又是老生常谈的并且让人头疼的 CSS 样式,提供一小段,自己参详吧!

.widget_tabcontent h3 span
{
	cursor:pointer;
	padding-bottom:4px;
}
.widget_tabcontent h3 span:hover
{
	color:#D54E21;
}
.selected
{
	color:#D54E21;
	border-bottom:1px solid #D54E21;
}
/*标题被选中时的样式*/
	.widget_tabcontent .hide
{
	display:none;
}
/*默认让第一块内容显示,其余隐藏*/
	.widget_tabcontent ul li:hover
{
	background-color:#EEE;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	cursor:pointer;
}

常用的调用文章代码

下面给出一些常用的调用文章代码,大家可以根据需要插入到适当的位置就好了。

热门文章:

<?php query_posts(array('posts_per_page' => 10,
'caller_get_posts' =>1,'orderby' =>comment_count,));
while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile;wp_reset_query();?>

最新文章:

<?php query_posts(array('posts_per_page' => 10,
'caller_get_posts' =>1,'orderby' =>date,));
while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile;wp_reset_query();?>

随机文章:

<?php query_posts(array('posts_per_page' => 10,
'caller_get_posts' =>1,'orderby' =>rand,));
while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile;wp_reset_query();?>

版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->WordPress 非插件实现侧栏等地方 Tab 切换的效果及代码!在下边可以分享本文哦!
喜欢 (0)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址