现在的位置: 首页 > Wordpress > WP技巧 > 正文
利用jQuery实现侧边栏Tab切换效果
2010年06月04日 WP技巧 ⁄ 共 2593字 评论数 43 ⁄ 被围观 8,618+

这两天一直在折腾wordpress的侧边栏,基本功能都实现得差不多了。但总还觉得有些不足,就像先看看童鞋所说的折腾点其它功能出来吧。我自然也是不满足于此,正好在木木童鞋小站看到jQuery之Tab切换代码改进这篇文章,于是便想拿过来用在自己的侧边栏,所以便有了下面的折腾过程。所以核心代码都来自于木木童鞋,想要进一步了解的,自己去看看吧。我所做的只是让更多像我这样的小白更加容易操作些,毕竟高手都是言简意赅的,具体实现的目标如我右边的侧边栏所示。

一、首先在自己主题文件下的header.php的head标签里加载jquery库。首先可以先检查下自己的主题是否有jquery.js这个文件,一般主题本身就带有,像我的主题里就有在/wp-content/themes/shadowblue/lib/里,如果有的话,在head标签里会看到这样的语句:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/lib/jquery-1.4.2.min.js"></script>

这就算是已经加载了,如果没有找到也不要紧,也不用放到自己的主机上,google上就有,只要添加如下的语句到head标签里就可以了:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

二、接下来就是侧边栏的html代码了,我选用了较常用的“最新文章”、“近期热评”、“热门标签”三个栏目作为Tab切换。

<div id="sidebar-tab">
	        <div id="tab-title">
		      <h3><span class="selected">最新文章</span><span>近期热评</span><span>热门标签</span></h3>
	        </div>
	        <div id="tab-content">
		      <ul><?php wp_get_archives('type=postbypost&limit=10'); ?></ul>
		      <ul class="hide"><?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $post) {setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?></ul>
		      <ul class="hide"><?php wp_tag_cloud('smallest=6&largest=18'); ?></ul>
	        </div>
          </div>

对照效果图,自己琢磨琢磨代码就明白其中的意义了。

三、CSS美化,添加下面的代码到主题里style.css文件里:

#sidebar-tab{border:0px;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 9px;border:0px;border-right:0px;margin-left:-1px;cursor:pointer;}
#tab-content .hide{display:none;} /*默认让第一块内容显示,其余隐藏*/
#tab-content ul{padding:5px 5px;overflow:hidden;}
#tab-content ul li{padding-top:5px;overflow:hidden;}

因为这个是和我的主题相适的,所以要用的话,简单的修改是必要的。至此已经完成一大半了,就差切换了,赶紧利用jquery来实现吧。

四、jQuery控制码。新建一个文本文件,添加如下代码:

jQuery(document).ready(function($){
$('#tab-title span').mouseover(function(){
	$(this).addClass("selected").siblings().removeClass();
	$("#tab-content > ul").eq($('#tab-title span').index(this)).show().siblings().hide();
});
});

然后另存为.js文件,例如ifenwen.js。然后上传到服务器任意目录下,例如我上传到的位置是:/wp-content/themes/shadowblue/lib/,也就是和上面讲的jquery在一个文件夹下,然后再在主题header.php的head标签里添加如下的代码:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/lib/ifenwen.js"></script>

这样就大功告成了,赶紧看看效果去吧。

上面讲的主要是针对我的主题所做的一点点修改,核心代码均来自于木木童鞋,有需要的童鞋可以自行察看,当然欢迎与我交流,乐意效劳~~~



目前有 43 条留言 其中:访客:39 条, 博主:0 条

  1. CCK : 2010年07月28日16:33:01  21楼

    站长你好
    请问为什么我把它放到侧边栏中部左右位置他就没有效里》?但放回侧边栏顶部就有。真费解。请指导!!


    • 管理员
      admin : 2010年07月29日08:05:43  地下1层

      哥儿们 你没有留下网站啊 我也不好帮你看啊

  2. alexin : 2010年08月27日11:07:03  22楼

    之前在哪看来。。觉得不错。。找个时间折腾一下。

  3. shaun : 2010年09月04日21:31:42  23楼

    很详细啊 留言 以后给主题加上 第二步内容不太明白 慢慢学

  4. smielbull : 2010年12月06日14:46:11  24楼

    这个很不错,实验成功!

  5. dianaluna : 2010年12月18日05:28:46  25楼

    先收藏了,学习

  6. John : 2011年01月12日22:39:44  26楼

    这个功能总是很受欢迎,要是放个效果图,就更吸引人了。


  7. 管理员
    admin : 2011年01月13日08:36:50  27楼

    @John:恩 之前有过效果图的 后来改变了侧边栏 简洁为主 见谅~~~按照上面的操作 一般没有问题的~~~

  8. seaswallow : 2011年01月19日17:56:22  28楼

    请问我主题的侧边栏的代码和你的这个不一样,那我怎么应用你这个侧边栏的代码呢?

  9. 阿溪 : 2011年05月13日19:24:28  29楼

    折腾了半天终于有点起色了!!!
    谢谢博主啦!!!

  10. : 2012年01月07日04:58:49  30楼

    都是添加而已,那些代码是不是随便放在什么地方都可以啊,能不能说清楚一点?


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×