WordPress侧边栏JQuery版TAB选项卡

林继 WordPress 3,313 共写了336个字 (2010-12-18 9:05:34) 没有评论 打印 扫描二维码 百度已收录

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

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

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

替换为

  1. <div id="tab-title"><?php include('r_tab.php'); ?></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,找到

  1. $('#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}

好了,这样应该就能达到想要的效果了。

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

发表评论

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

< >