现在的位置: 首页 > WordPress > 正文

如何在WordPress侧边栏使用JQuery版TAB选项卡

2010年12月13日 WordPress ⁄ 共 2021字 ⁄ 字号 评论 4 条 ⁄ 阅读 4,114 次

HotNewspro主题自带的选项卡是上下式的,在网速很慢的情况会拖很长的一块。很影响美观。于是就想换个其他样式的选项卡,而左右切换的就基本遇不到这个问题了。

那就以HotNewspro主题2.33版本为例简单讲下使用过程。

特别提示:编辑代码请使用编辑器,如DreamWeaver,请勿使用记事本。

请确保你网页已经包含了Jquery框架。

第一:将下面的文件下载解压之后,把r_tab.php上传到主题的根目录下面。

点击下载:r_tab.rar

第二:打开sidebar.php,将下面的代码:

<div class="tab">
 <ul id=drawer>
 <li><a href="#">最新文章</a>
 <ul>
 <ol id="newarticles">
 <?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post) :?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
 <?php endforeach; ?>
 </ol>
 </ul>
 <li><a href="#">热门文章</a>
 <ul>
 <ol id="hotarticles">
 <?php $popular = new WP_Query('orderby=comment_count&caller_get_posts=4&posts_per_page=10'); ?>
 <?php while ($popular->have_posts()) : $popular->the_post(); ?>
 <a href="<?php the_permalink(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
 <?php endwhile; ?>
 </ol>
 </ul>
 <li><a href="#">随机文章</a>
 <ul>
 <ol id="advice">
 <?php
 query_posts(array('orderby' => 'rand', 'showposts' => 10, 'caller_get_posts' => 4));
 if (have_posts()) :
 while (have_posts()) : the_post();?>
 <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php echo cut_str($post->post_title,32); ?></a></li>
 <?php endwhile;endif; ?>
 </ol>
 </ul>
 </li>
 </ul>
</div>

替换为:

<div id="tab-title"><?php include('r_tab.php'); ?></div>

第三:打开header.php,找到:

$('#drawer').children('li:last').addClass('lastitem');

JQuery控制切换的代码复制到这一行的后面:

	$('#tab-title span').click(function(){
	$(this).addClass("selected").siblings().removeClass();
	$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
});

第四:添加下列代码到CSS文件中:

#tab-title .selected{color:#000;font-weight:bold}
#tab-title span{padding:5px 18px 8px 1px;border-right:0px;margin-left:-1px;cursor:pointer;}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px 10px;overflow:hidden;border-right:1px solid #ccc;border-left:1px solid #ccc;background:#fff;}
#tab-content ul li{line-height:25px;list-style:none}

本文转自:http://www.weisay.com/blog/wordpress-jquery-tab.html

目前有 4 条留言    访客:2 条, 博主:0 条 ,引用: 2 条

  1. 小杰博客 2010年12月13日 22:37  @回复  Δ1楼 回复

    这个tab效果不错哦,呵呵

  2. 龙蛋蛋 2011年03月06日 20:53  @回复  Δ2楼 回复

    $(‘#drawer’).children(‘li:last’).addClass(‘lastitem’);
    好像没有这样的东西啊。 :eek:

外部的引用: 2 条

  • 几个美化WordPress的方法 | 穷得瑟
  • 几个美化WordPress的方法 | 依米虾

给我留言

留言无头像?