tab切换页面备份

<?php get_header(); ?>
  <div class="maincon">
        <div id="search">
<form id="searchform" method="get" action="<?php echo home_url(); ?>">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" size="20" placeholder="Search name or tag" required>
<button type="submit">Search</button>
</form>
</div>
        <div class="login">
        <?php
global $user_ID, $user_identity, $user_email, $user_login;
get_currentuserinfo();
if (!$user_ID) {
  ?>
    <div class="author"><a href="<?php echo get_option('siteurl'); ?>?page_id=49" >登录</a> | <a href="<?php echo get_option('siteurl'); ?>?page_id=48" >注册</a></div>
    <?php }
else { ?><div class="author"><a href="<?php echo get_option('siteurl'); ?>?page_id=47" >您好 <?php echo $user_identity; ?> </a> | <a href="<?php echo get_option('siteurl'); ?>?page_id=60" >收藏夹</a> | <a href="<?php echo wp_logout_url(home_url()); ?>" >注销</a></div>
<?php } ?>


      </div>


</div>
<section id="post">
<?php while (have_posts()) : the_post(); ?>
<article>
<!--<header>
<div class="time">
<time datetime="<?php the_time('Y-m-d'); ?>" pubdate>
<div class="day"><?php the_time('d'); ?></div>
<div class="mon"><?php the_time('Y-m'); ?></div>
</time>
</div>
<h1><?php the_title(); ?></h1>
<div class="tags"><?php the_tags(); ?></div>
  <div class="addthis_toolbox" addthis:url="<?php the_permalink() ?>" addthis:title="<?php the_title(); ?>">
<a class="addthis_button_twitter"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_sinaweibo"></a>
</div>
          
</header>-->
      <div id="post_content"><?php the_post_thumbnail('medium');?>
          <div class="toolbar">
    <div><?php if (function_exists('wpfp_link')) { wpfp_link(); } ?><?php wpfp_get_current_count(); ?>  分享  寻找类似  <input type="button" class="xzbtn" /></div>
</div>
      </div>
      
      <div class="item">
      <div class="bar">
    <ul>
      <li><a href="#" class="current3">基本信息</a></li>
      <li><a href="#" class="bard">瞬间背后</a></li>
    </ul>
  </div>
  <div class="content">
    <ul>
      <div class="conbox">
              <li><h1><?php the_title(); ?></h1></li>
              <li><?php the_time('Y-m-d'); ?></li>
      <li>版权人 </li>
              <li>瞬间背后</li>
<li>尺寸 1024*1521</li>
        
      </div>
    </ul>
    <ul>
      <div class="conbox">
        <li><?php the_content(); ?></li>
      </div>
    </ul>
</div>  
        
</div>




</article>
<?php endwhile; ?>
  <div class="toolbar">
    <div id="singletitle">
<p>热门推荐 </p>
    </div>
    <aside id="random">
<ul>
    <?php $rand_posts = get_posts('numberposts=6&orderby=rand');  foreach( $rand_posts as $post ) : ?>
    <li><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></li>
    <?php endforeach; wp_reset_query(); ?>    
</ul>
</aside>
  </div>


 
<div class="toolbar">
       <div id="singletitle">
<p>热门标签 </p>
    </div>
<div class="tags"><?php wp_tag_cloud('number=10&smallest=8&largest=8&orderby=count&order=DESC');?></div>
  </div>
</section>






<?php get_footer(); ?>




      <!--me-->
       
    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
<!--切换 -->
$(function(){
    $(".bar a:first").addClass("current3")//
$(".bar li").css("left",function(i){return i})//
$(".content ul:eq(0)").show()
$(".bar a").click(function(){
  $(this).addClass("current3")
  $(this).parent().siblings().children().removeClass("current3")
  var n = $(this).parent().index()
  $($(".content ul")[n]).siblings().hide()
  $($(".content ul")[n]).stop(true,true).fadeTo(300,1)
 
})
});

</script>

----------------

css

.item {height:450px; width:400px; position: absolute; top:75px; left: 620px; border: 0px solid #EeEeEe; }
.bar { height: 34px; width:auto; }
.bar li { float: left; }
.bar li a { line-height: 34px; color: #666666; text-decoration: none; font-size: 14px; display: block; width:auto; text-align: center; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #E1E1E1; background-color: #EEEEEE; padding:0 30px; }
.bard { border-left-width: 1px; border-left-style: solid; border-left-color: #E1E1E1; }
.bar a.current3 { color: #2e2e2e; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #fff; background-color: #fff; }
.content { float: left; height:260px; width: auto; padding-top: 20px; padding-left: 10px; padding-right: 10px; padding-bottom: 20px; }
.content li { padding-left: 10px;padding-right: 0px; line-height: 24px; }
.content li a { color: #333333; text-decoration: none; }
.content li a.contentd { color: #990000; }
.content ul { display: none; }
.xzbtn { width:129px; height:38px; background:url(images/xz.png) 0 0 no-repeat; cursor:pointer; border:0; margin-top:0px; }
.conbox{ height:auto;width:375px; max-height:375px; overflow: auto; visibility: visible; }