首页 » 建站技术 » WordPress » 浏览内容

WordPress侧边栏JQuery版TAB选项卡


2011-05-22 10:30:51 2,582 0 发表评论 字体: 作者:C.K.
标签: javascriptJqueryWordPress代码

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

<h3><span class="selected">最新日志</span><span>热门日志</span><span>随机日志</span></h3>
  •     <div id="tab-content">
  •         <ul><?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post) :?>
  •                     <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,32); ?></a></li>
  •                     <?php endforeach; ?></ul>
  •         <ul class="hide"><?php $popular = new WP_Query('orderby=comment_count&caller_get_posts=4&posts_per_page=10'); ?>
  •                         <?php while ($popular->have_posts()) : $popular->the_post(); ?>
  •                         <li><a href="<?php the_permalink(); ?>"><?php echo cut_str($post->post_title,32); ?></a></li>
  •                         <?php endwhile; ?></ul>
  •         <ul class="hide"><?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; ?></ul>
  •                     </div>
  • <div class="box-bottom">
  •     <b class="lb"></b>
  •     <b class="rb"></b>
  • </div>
  • 第二:打开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>

    第三:JQuery控制切换的代码

        $('#tab-title span').click(function(){
  •     $(this).addClass("selected").siblings().removeClass();
  •     $("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
  • });
  • 打开header.php,找到

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

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

    第四: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

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4761 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13192580 位访客

      广告区 Guǎng Gào