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，实现几个栏目内容切换的效果，为了方便，我也把导航设置成了后台可控。