CSS+JS实现内容切换

效果如上图，还附带特效，当时在一个网站看到这个，觉得还不错，或许以后会用到，所以就给扒下来了。

Demo下载：[ GO ]   密码: my9f

如果想在wordpress中添加这个功能，该怎么弄呢？很简单，只需要添加几段代码即可。

主题 functions.php 中添加如下代码：

//添加文章ID add_action('admin_menu', 'create_meta_box');  add_action('save_post', 'save_postdata');   $new_meta_box = array(   "id" => array(   "name"=>"id",   "std"=>"",   "title"=>"文章指定显示板块ID"   )   );   function create_meta_box(){   if(function_exists('add_meta_box')){   add_meta_box('new-meta-box','展示栏目设置','new_meta_box','post','normal','high');   }   }  function new_meta_box(){   global $post,$new_meta_box;   foreach($new_meta_box as $meta_box){   $meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);   if($meta_box_value == "")   $meta_box_value = $meta_box['std'];   echo '<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$mata_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'"/>';   echo '<div style="height: 20px;"><h4 style="width: 125px;">'.$meta_box['title'].'</h4>'.'<textarea cols="10" style="top: -40px;position: relative;left: 130px;" rows="1" name="'.$meta_box['name'].'_value">'.$meta_box_value.'</textarea><span style="top: -46px;position: relative;left: 140px;">默认5个栏目，根据顺序设置1-5,可以同时设置多个栏目显示，格式如：1 5 加个空格即可.</span></div>';   }   }  function save_postdata($post_id){   global $post,$new_meta_box;   foreach($new_meta_box as $meta_box){   if(!wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )){   return $post_id;   }   if('page' == $_POST['post_type']){   if(!current_user_can( 'edit_page', $post_id ))   return $post_id;   }else{   if(!current_user_can( 'edit_post', $post_id ))   return $post_id;   }   $data = $_POST[$meta_box['name'].'_value'];   if(get_post_meta($post_id, $meta_box['name'].'_value') == "")   add_post_meta($post_id, $meta_box['name'].'_value', $data, true);   elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))   update_post_meta($post_id, $meta_box['name'].'_value', $data);   elseif($data == "")   delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));   }   }   /* 前台调用方式：  $desc="id_value";   $alid=get_post_meta($post->ID,$desc,true);  echo $alid;  具体参考下方我给的案列代码 */

添加以上代码后，在后台发布文章处即可看到效果：

然后将 Dome 压缩包中的代码套入到你的主题中，具体套入需要根据你的主题代码修改，附上我给一个客户做的主题中的代码：

 <div id="portfolio" class="section anchor" style="padding-top: 53px; margin-top: -53px;">  <div class="dark-wrapper">  <div class="container inner">  <h2 class="section-title text-center"><?php echo dopt('d_dh_name'); ?></h2>  <p class="lead main text-center"><?php echo dopt('d_dh_jj'); ?></p>  <div class="grid-portfolio fix-portfolio">  <ul class="filter">  <li><a class="active" href="#" data-filter="*">全部</a></li>  <li><a href="#" data-filter=".1"><?php echo dopt('d_dh_name1'); ?></a></li>  <!-- 这里我改成了后台可控。 -->  <li><a href="#" data-filter=".2"><?php echo dopt('d_dh_name2'); ?></a></li>  <li><a href="#" data-filter=".3"><?php echo dopt('d_dh_name3'); ?></a></li>  <li><a href="#" data-filter=".4"><?php echo dopt('d_dh_name4'); ?></a></li>  <li><a href="#" data-filter=".5"><?php echo dopt('d_dh_name5'); ?></a></li>  </ul>    <!-- /filter -->  <ul class="content-slider items isotope" style="position: relative; overflow: hidden; height: 918px;">  <?php $limit = get_option('posts_per_page');  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;  query_posts('post_type=post&post_status=publish&showposts=' . $limit=9 . '&paged=' . $paged);  if (have_posts()) : while (have_posts()) : the_post();   $desc="id_value";   $alid=get_post_meta($post->ID,$desc,true); // 前台调用ID  ?>  <li class="item thumb <?php echo $alid; ?> isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">  <figure><a href="<?php%20the_permalink();%20?>" data-contenturl="<?php%20the_permalink();%20?>" data-callback="callPortfolioScripts();" data-contentcontainer=".pcw">  <div class="text-overlay">  <div class="info"><?php the_title(); ?></div>  </div>  <img src="<?php%20bloginfo('template_url');?>/timthumb.php?src=<?php%20echo%20post_thumbnail_src();%20?>&h=160&w=200&zc=1" alt=""> </a></figure>  </li>   <?php endwhile;endif; ?>   </ul>

添加后台对前台的可控功能，如：

<li class="item thumb <?php echo $alid; ?> isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);"> 

其他地方我就不多解释了，主要是看 li 标签中的 class ，不同栏目展示不同内容，是根据这个class中的数字决定的，因此我将这里改成了可控，在编辑文章的时候，填写了ID，那么他会在这里自动输出当时填写的ID，实现几个栏目内容切换的效果，为了方便，我也把导航设置成了后台可控。