• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

WordPress 非插件實現側欄等地方Tab切換的效果及代碼

WP插件 奇跡の海 2年前 (2017-04-27) 457次瀏覽 已收錄 0個評論 掃描二維碼

WordPress 非插件實現側欄等地方Tab切換的效果及代碼

前言

這個貌似用到的博客挺多的,像我的博客右側(最新日志,熱評日志,隨機日志)這三個欄目就有用到了這種效果,好處是比較省地方,側欄太長影響和諧啊,這個東西還挺不錯的,其實實現起來挺簡單的,下面來說下代碼實現這種效果的方法,供大家參考下。

實現方法

其實這個不僅可以用于側欄、底欄、頭部都沒有問題的,只需要稍微調整下格式即可,下面通過示例說下實現的方法。

首先,在需要他顯示的地方加入以下代碼,如下:

<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文件,這個挺小的,直接貼代碼,適當的位置調用即可,代碼如下:

&lt;script type=&quot;text/javascript&quot;&gt;
 jQuery(document).ready(function($){
 //注意要用這個把jQuery<a href="http://www.bavghg.tw/archives/tag/dm" title="查看更多關于代碼的文章" target="_blank">代碼</a>都包裹起來,不然里面的可都是無效的哦~
$('.widget_tabcontent h3 span').click(function(){
    $(this).addClass(&quot;selected&quot;).siblings().removeClass();
    $(&quot;.widget_tabcontent &gt; ul&quot;).slideUp('1500').eq($('.widget_tabcontent h3
span').index(this)).slideDown('1500');
});
});
&lt;/script&gt;

注意:默認的是點擊切換特效,如果喜歡,也可以改成鼠標移動指向自動切換的,將click(function()中的click改成mouseover即可(如Timle.CN站點右側采用的mouseover方式),顯示方式修改slideUp/slideDown即可。

最后,又是老生常談的并且讓人頭疼的CSS樣式,提供一小段,自己參詳吧!

.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;
}

常用的調用文章代碼

下面給出一些常用的調用文章代碼,大家可以根據需要插入到適當的位置就好了。

熱門文章:

<?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();?>

版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->WordPress 非插件實現側欄等地方Tab切換的效果及代碼!在下邊可以分享本文哦!
喜歡 (0)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果