WordPress,側欄等地方非插件實現Tab切換的效果代碼分享
這個貌似用到的博客挺多的,像我的博客就有用到了這種效果,好處是比較省地方,側欄太長影響和諧啊,這個東西還挺不錯的,其實實現起來挺簡單的,下面來說下代碼實現這種效果的方法,供大家參考下!
首先鳴謝下Iecho同學,希望大家多多分享,多多支持啊!
其實這個不僅可以用於側欄,底欄,頭部都沒有問題的,只需要稍微調整下格式即可,下面通過示例說下實現的方法!
首先:在需要他顯示的地方加入以下代碼,如下:
1 2 3 4 5 6 7 8 | <div class="widget_tabcontent"> <h3><span class="selected">最新文章</span> <span>最熱文章</span> <span>隨機文章</span></h3> <ul>插入要調用的函數</ul> <ul class="hide">插入要調用的函數</ul> <ul class="hide">插入要調用的函數</ul> </div> |
其次:引入加載JS文件,這個挺小的,直接貼代碼,適當的位置調用即可,代碼如下:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> jQuery(document).ready(function($){ //註意要用這個把jQuery代碼都包裹起來,不然裏面的可都是無效的哦~ $('.widget_tabcontent h3 span').click(function(){ $(this).addClass("selected").siblings().removeClass(); $(".widget_tabcontent > ul").slideUp('1500').eq($('.widget_tabcontent h3 span').index(this)).slideDown('1500'); }); }); </script> |
註意:默認的是點擊切換特效,如果喜歡,也可以改成鼠標移動指向自動切換的,將click(function()中的click改成mouseover即可,顯示方式修改slideUp/slideDown即可!
最後,又是老生常談的並且讓人頭疼的CSS樣式,提供一小段,自己參詳吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .widget_tabcontent h3 span { cursor:pointer; padding-bottom:4px; } .widget_tabcontent h3 span:hover { color:#D54E21; } .selected { color:#D54E21; border-bottom:1px solid #D54E21; } /*標題被選中時的樣式*/ .widget_tabcontent .hide { display:none; } /*默認讓第一塊內容顯示,其余隱藏*/ .widget_tabcontent ul li:hover { background-color:#EEE; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; cursor:pointer; } |
下面給出一些常用的調用文章代碼,大家可以根據需要插入到適當的位置就好了:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 熱門文章: <?php query_posts(array('posts_per_page' => 10, 'caller_get_posts' =>1,'orderby' =>comment_count,)); while ( have_posts() ) : the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile;wp_reset_query();?> 最新文章: <?php query_posts(array('posts_per_page' => 10, 'caller_get_posts' =>1,'orderby' =>date,)); while ( have_posts() ) : the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile;wp_reset_query();?> 隨機文章: <?php query_posts(array('posts_per_page' => 10, 'caller_get_posts' =>1,'orderby' =>rand,)); while ( have_posts() ) : the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile;wp_reset_query();?> |
更多想點擊下面的文章詳細查看!
Shall We Go!下面GO GO GO!
L—>No1.WordPress,免插件文章輸出代碼分享之最新發布文章
L—>No2.WordPress,免插件文章輸出代碼分享之最多評論頁面和文章
L—>No3.WordPress,免插件文章輸出代碼分享之隨機文章推薦
L—>No4.WordPress,免插件文章輸出代碼分享之隨機點擊進入一篇文章
Ovoer!基本就是這樣,休息一下,馬上回來!
悦听有声,路过看看
简繁转换功能在也没刷新下会失效
好东西 谢谢分享先收藏一下下 ...
主题蛮好看的,好像轻博客一样
不错呀
不错哦 收藏了