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

那我就以HotNewspro主题2.33版本为例简单讲下使用过程，高手就路过吧。特别提示：编辑代码请用编辑器，如DreamWeaver，请勿使用记事本。 

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

第一：将下面的代码保存为r_tab.php，放到主题的文件夹下面。
[code]<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>[/code]
第二：打开sidebar.php，将下面的代码 

[code]<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>[/code]
替换为
[code]<div id="tab-title"><?php include('r_tab.php'); ?></div>[/code]
第三：JQuery控制切换的代码
[code] $('#tab-title span').click(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500');
});[/code]
打开header.php，找到
[code]$('#drawer').children('li:last').addClass('lastitem');[/code]
将JQuery控制切换的代码复制到他的后面。 

第四：CSS
[code]#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}[/code]
好了，这样应该就能达到想要的效果了。