HotNewsPro主题DIY–侧边栏Tab选项卡 2.7plus版

2011-11-24 12:11:00 作者： 所属分类：WordPress 阅读：1603 评论：10

标签： , ,

先上图,看看吧

2.7plus版本和以前的有很大的不同了,研究了下,不过总算是找到解决方案了.下面就来实现吧:

 

1.找到主题下的includes文件夹下的tab.php文件

Code
  1. <ul class="htotabs">  
  2.     <li class="widget1"><a value="#tab-widget_1">最新文章</a></li>  
  3.     <li class="widget2"><a value="#tab-widget_2">年度排行</a></li>  
  4.     <li class="widget3"><a value="#tab-widget_3">随机浏览</a></li>  
  5.     <div class="clear"></div>  
  6. </ul> 

为上面的li分别赋上属性值。再将下面div中的ul的id分别赋值为value的#后面的值。

然后将文件最下面的js方法替换成下面的内容：

Code
  1. jQuery(document).ready(function(){  
  2.     jQuery( '.htotabs').each(function(){  
  3.         jQuery(this).children( 'li:first').addClass( 'widget1_selected' ); // Add .selected class to first tab on load  
  4.         jQuery(this).children( 'li').children('a:first').addClass( 'selected' ); // Add .selected class to first tab on load  
  5.     });  
  6.     jQuery( '.tab-inside > *').hide();  
  7.     jQuery( '.tab-inside > *:first-child').show();  
  8.     jQuery( '.htotabs li a').click(function(evt){ // Init Click funtion on Tabs       
  9.         var clicked_tab_ref = jQuery(this).attr( 'value' ); // Strore Href value  
  10.         jQuery(this).parent().parent().children( 'li').children('a').removeClass( 'selected' ); //Remove selected from all tabs  
  11.         jQuery(this).addClass('selected');  
  12.           
  13.         var curIndex=clicked_tab_ref.split('_')[1];  
  14.         var tabs=jQuery(this).parent().parent().children( 'li');  
  15.         for(var i=0;i<tabs.length;i++)  
  16.         {  
  17.             var c =i+1;  
  18.             if(c==curIndex)  
  19.             {  
  20.                 tabs[i].className='widget'+c+'_selected';  
  21.             }  
  22.             else 
  23.             {  
  24.                 tabs[i].className='widget'+c;  
  25.             }  
  26.         }  
  27.         jQuery(this).parent().addClass('widget'+curIndex+'_selected');  
  28.           
  29.         jQuery(this).parent().parent().parent().children( '.tab-inside').children( '*').hide();  
  30.         jQuery( '.tab-inside ' + clicked_tab_ref).fadeIn(500);  
  31.         evt.preventDefault();                 
  32.     })  
  33. }) 

 

2.找到主题下的style.css文件，找到原来的widget样式，替换成

Code
  1. .widget1 {  
  2.     margin:0px;float:left; width:78px;text-align:center;color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_a.png) no-repeat !important;color:#FFF !important;  
  3.     }  
  4. .widget2 {  
  5.     margin:0px;float:left; width:80px;text-align:center;color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_b.png) no-repeat !important;color:#FFF !important;  
  6.     }  
  7. .widget3 {  
  8.     margin:0px;float:left; width:78px;text-align:center;color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_c.png) no-repeat !important;color:#FFF !important;  
  9.     }  
  10. .widget1_selected {  
  11.     margin:0px;float:left; width:78px;text-align:center;color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_a.png) 0 -112px no-repeat !important;color:#FFF !important;  
  12.     }  
  13. .widget2_selected{  
  14.     margin:0px;float:left; width:80px;text-align:center;color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_b.png) 0 -112px no-repeat !important;color:#FFF !important;  
  15.     }  
  16. .widget3_selected{  
  17.     margin:0px;float:left; width:78px;text-align:center;color:#000;cursor:pointer;font-weight:bold;background:url(images/sidebar_c.png) 0 -112px no-repeat !important;color:#FFF !important;  
  18.     } 

 

Tab的样式图片，在后面下载吧，至于什么颜色，自己选择吧。

» 郑重声明：本文由IT伯伯发布，所有内容仅代表个人观点。版权归IT伯伯和IT伯伯共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。
【上一篇】
【下一篇】

目前有 10 条留言 其中：访客:6 条, 博主:4 条

  1. 阿呆 CHINA Internet Explorer Windows : 2011年12月13日16:17:09 5楼 @回复 回复

    呵呵。完美。回访了。 :razz:

    • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2012年03月16日21:01:53 @回复 回复

      呵呵，欢迎来访哦~~

  2. 陌凡 CHINA Internet Explorer Windows : 2011年12月11日13:40:01 4楼 @回复 回复

    呵呵，这个不错，待会试试 :sad:

    • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2011年12月11日13:46:34 @回复 回复

      为什么流汗呢?

  3. 过客小小 CHINA Internet Explorer Windows : 2011年12月05日11:58:39 地板 @回复 回复

    哈哈,这个chenglong真搞笑呀 :!:

    • BeautySky CHINA Google Chrome Windows : 2011年12月05日12:22:34 @回复 回复

      :razz: 他确实逗啊。。

  4. chenlong CHINA Google Chrome Windows : 2011年12月01日14:19:30 板凳 @回复 回复

    write good~ ~
    ~~seek a single girl~~

    • 头像 IT伯伯 CHINA Mozilla Firefox Windows : 2011年12月01日14:20:54 @回复 回复

      英文版的来了？~~~~ :cool:

  5. chenlong CHINA Google Chrome Windows : 2011年12月01日14:08:30 沙发 @回复 回复

    好~
    ~~~求女光棍一枚~·

给我留言


插入图片

页面载入中..

展开