Home >  > WordPress侧边栏JQuery版TAB选项卡

WordPress侧边栏JQuery版TAB选项卡

6

wordpress很多主题自带的选项卡是上下式的,在网速很慢的情况会拖很长的一块。感觉影响美观了。于

是就想换个其他样式的选项卡,而左右切换的就比较基本没有遇到这个问题了。

那我就以HotNewspro主题为例简单讲下使用过程,高手就路过吧。特别提示:编辑代码请用编辑器,如

DreamWeaver,请勿使用记事本。

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

第一:将下面的代码保存为r_tab.php,放到主题的文件夹下面。

[sourcecode language="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>
[/sourcecode]
第二:打开sidebar.php,将下面的代码

[sourcecode language="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>
[/sourcecode]
替换为

[sourcecode language="php"]
<div id="tab-title"><?php include('r_tab.php'); ?></div>
[/sourcecode]
第三:JQuery控制切换的代码

[sourcecode language="php"]
$('#tab-title span').click(function(){
$(this).addClass("selected").siblings().removeClass();
$("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index

(this)).slideDown('1500');
});
[/sourcecode]
打开header.php,找到

[sourcecode language="php"]
$('#drawer').children('li:last').addClass('lastitem');
[/sourcecode]
将JQuery控制切换的代码复制到他的后面。第四:CSS

[sourcecode language="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}
[/sourcecode]
好了,这样应该就能达到想要的效果了。

相关推荐

Comment (6)
Trackback (0)
  1. 网络推手 unknowunknow 沙发 2010/12/14 03:00

    来学习了 呵呵 真的不错啊

  2. 衡阳seo unknowunknow 板凳 2010/12/14 11:02

    如此详细

  3. 急上昇 unknowunknow 地板 2010/12/15 07:04

    谢谢,有收获,写的不错啊,不错啊

  4. 女人心 unknowunknow 4楼 2012/03/06 01:46

    赞一个,,,,,,, :mrgreen:

  5. 移动电源 unknowunknow 5楼 2012/08/02 01:59

    说实话我比较喜欢简单的teb选项卡,而且是鼠标滑动式的,就几句js代码+几句css可以搞定了那种

  • 还没有Trackback

发表评论

You must be logged in to post a comment.