Zblog Blue Simplicity theme release
<div class="sidebar_block"> <div class="tabtitle"> <ul id="tabnav"> <li class="selected">Latest articles</li> <li class="">Popular articles</li> <li class="">Random articles</li> </ul> </div> <div class="tabcon" id="tab-content"> <ul> <#CACHE_INCLUDE_PREVIOUS#> </ul> <ul class="hide"> {YT:Article DataSource="GetArticleRandomSortTopHot(10)"} <li><a href="{$Article.Url}">{$Article.HtmlTitle}</a></li> {/YT:Article} </ul> <ul class="hide"> {YT:Article DataSource="GetArticleRandomSortRand(10)"} <li><a href="{$Article.Url}">{$Article.HtmlTitle}</a></li> {/YT:Article} </ul> </div> </div> </div>
/*Sidebar Tab*/ .tabtitle { font-size:14px; color:#000; font-weight:bold; line-height:35px; overflow:hidden; } .tabcon { height:230px; padding:5px 0; line-height:30px; overflow:hidden; } #tabnav { display:block; clear:both; zoom:1; } #tabnav li { width:103px; float:left; margin-bottom:5px; font-size:14px; color:{%aryColor(4)%}; font-weight:normal; text-align:center; cursor:pointer; border-bottom:2px solid #323436; } #tabnav .selected { color:{%strHdBg%}; border-bottom:2px solid {%strHdBg%}; position:relative; } #tab-content .hide { display:none; } #tab-content ul { height:240px; overflow:hidden; } #tab-content ul li { float:left; width:100%; padding-left:8px; line-height:22px; border-bottom:1px dashed #f3f3f3; text-indent:0.8em; background:url(images/list.png) no-repeat 0 9px; } #tab-content ul li a { font-size:12px; color:{%aryColor(1)%}; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #tab-content ul li a:hover { color:{%aryColor(2)%}; }
$(function(){ $('#tabnav li').hover(function() { $(this).addClass("selected").siblings().removeClass(); $("#tab-content > ul").eq($('#tabnav li').index(this)).fadeIn(100).siblings().hide() }); });
Related articles
Zblog impressionism theme release! Tuoyuan Online Vision theme is free, welcome to use! Tuoyuan responsive theme TBlog is released for free, welcome to use! The zblog topic "Tuoyuan Mizhe Preview" has been released, welcome to use! Zblog concise theme "Memory" release - Tuoyuan zblog theme team The theme of zblog group purchase Tuoyuan Group Purchase is dedicated by the theme creation team of zblog on Tuoyuan