WordPress侧边栏JQuery版TAB选项卡

林继 WordPress 2,976 共写了419个字 (2011-05-22 10:30:51) 没有评论 打印 扫描二维码 百度已收录

特别提示:编辑代码请用编辑器,如DreamWeaver,请勿使用记事本。
请确保你网页已经包含了Jquery框架。
第一:将下面的代码保存为r_tab.php,放到主题的文件夹下面。

  1. <h3><span class="selected">最新日志</span><span>热门日志</span><span>随机日志</span></h3>
  2.     <div id="tab-content">
  3.  
  4.         <ul><?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post) :?>
  5.                     <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,32); ?></a></li>
  6.                     <?php endforeach; ?></ul>
  7.  
  8.         <ul class="hide"><?php $popular = new WP_Query('orderby=comment_count&caller_get_posts=4&posts_per_page=10'); ?>
  9.                         <?php while ($popular->have_posts()) : $popular->the_post(); ?>
  10.                         <li><a href="<?php the_permalink(); ?>"><?php echo cut_str($post->post_title,32); ?></a></li>
  11.                         <?php endwhile; ?></ul>
  12.  
  13.         <ul class="hide"><?php
  14.                             query_posts(array('orderby' => 'rand', 'showposts' => 10, 'caller_get_posts' => 4));
  15.                             if (have_posts()) :
  16.                             while (have_posts()) : the_post();?>
  17.                             <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>
  18.                         <?php endwhile;endif; ?></ul>
  19.                     </div>
  20.  
  21. <div class="box-bottom">
  22.     <b class="lb"></b>
  23.     <b class="rb"></b>
  24. </div>

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

  1. <div class="tab">
  2.     <ul id=drawer>
  3.         <li><a href="#">最新文章</a>
  4.             <ul>
  5.                 <ol id="newarticles">
  6.                     <?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post) :?>
  7.                     <a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
  8.                     <?php endforeach; ?>
  9.                 </ol>
  10.             </ul>
  11.         <li><a href="#">热门文章</a>
  12.             <ul>
  13.                 <ol id="hotarticles">
  14.                     <?php $popular = new WP_Query('orderby=comment_count&caller_get_posts=4&posts_per_page=10'); ?>
  15.                     <?php while ($popular->have_posts()) : $popular->the_post(); ?>
  16.                     <a href="<?php the_permalink(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
  17.                     <?php endwhile; ?>
  18.                 </ol>
  19.             </ul>
  20.         <li><a href="#">随机文章</a>
  21.             <ul>
  22.                 <ol id="advice">
  23.                     <?php
  24.                         query_posts(array('orderby' => 'rand', 'showposts' => 10, 'caller_get_posts' => 4));
  25.                         if (have_posts()) :
  26.                         while (have_posts()) : the_post();?>
  27.                         <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>
  28.                     <?php endwhile;endif; ?>
  29.                 </ol>
  30.             </ul>
  31.         </li>
  32.     </ul>
  33. </div>

替换为

第三:JQuery控制切换的代码

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

打开header.php,找到

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

将JQuery控制切换的代码复制到他的后面。

第四:CSS

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

好了,这样应该就能达到想要的效果了。本文来自:http://www.weisay.com/blog/wordpress-jquery-tab.html

历史上的今天

5月
22

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >