Emlog实现侧边栏tabs最新、最热、随机文章自动切换

不多说直接放代码：

首先是三个tabs的函数，emlog默认有自带的，我没有使用，而是使用自定义的：

 

<?php
//最新文章
function new_log(){
$db = MySql::getInstance();
$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' ORDER BY date DESC LIMIT 0,8";//从数据库中取按时间排序最新的8篇
$list = $db->query($sql);
$i = 0;
?>
<ul>
<?php while($row = $db->fetch_array($list)){ 
$i++;
?>
<li><a href="<?php echo BLOG_URL; ?>?post=<?php echo $row['gid']; ?>" title="<?php echo $row['title']; ?>">
<?php if($i==1){?><em class="hotone"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="hottwo"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="hotthree"><?php echo $i;?></em>
<?php }else{ ?><em class="hotsoso"><?php echo $i;?></em>
<?php }?>
<?php echo $row['title']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>

<?php
//30天按点击率排行文章、即热门文章
function hot_log(){
$db = MySql::getInstance();
$time = time();
$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 30*24*60*60 ORDER BY views DESC LIMIT 0,8";
$list = $db->query($sql);
$i = 0;
?>
<ul>
<?php while($row = $db->fetch_array($list)){ 
$i++;
?>
<li><a href="<?php echo BLOG_URL; ?>?post=<?php echo $row['gid']; ?>" title="<?php echo $row['title']; ?>">
<?php if($i==1){?><em class="hotone"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="hottwo"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="hotthree"><?php echo $i;?></em>
<?php }else{ ?><em class="hotsoso"><?php echo $i;?></em>
<?php }?>
<?php echo $row['title']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
 
 
<?php
//widget：随机文章
function random_log(){
    $Log_Model = new Log_Model();
    $randLogs = $Log_Model->getRandLog(8);$i=1;
?><ul>
<?php foreach($randLogs as $value): ?>
<li><a href="<?php echo Url::log($value['gid']); ?>">
<?php if($i==1){?><em class="hotone"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="hottwo"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="hotthree"><?php echo $i;?></em>
<?php }else{ ?><em class="hotsoso"><?php echo $i;?></em>
<?php }?>
<?php echo $value['title']; ?></a></li>
<?php $i++; endforeach; ?>
</ul>
<?php }?>
然后在侧边栏合适的位置调用
<div id="widget">
    <div id="big" class="tab_nav">
    <UL id="tags">
      <LI class="selectTag"><A onMouseover="selectTag('tagContent0',this)" href="javascript:void(0)"><i class="fa fa-paint-brush"></i><span>最新发表</span></A> </LI>
      <LI><A onMouseover="selectTag('tagContent1',this)" href="javascript:void(0)"><i class="fa fa-fire"></i><span>热门推荐</span></A> </LI>
      <LI><A onMouseover="selectTag('tagContent2',this)" href="javascript:void(0)"><i class="fa fa-angellist"></i><span>手气不错</span></A> </LI>
    </UL>
    </div>
        <DIV id="tagContent">
        <DIV class="tagContent" id="tagContent0"><?php new_log();?><!--最新文章--></DIV>
        <DIV class="tagContent hide selectTag" id="tagContent1"><?php hot_log();?><!--30天热门文章--></DIV>
        <DIV class="tagContent hide" id="tagContent2"><?php random_log();?><!--随机文章--></DIV>
    </DIV>
</div>
<?php 
 
最后js实现tabs自动切换
//tag切换
var obig = document.getElementById("big");
function selectTag(showContent, selfObj) {
    var tag = document.getElementById("tags").getElementsByTagName("li");
    var taglength = tag.length;
    for (i = 0; i < taglength; i++) {
        tag[i].className = "";
    }
    selfObj.parentNode.className = "selectTag";
    for (i = 0; j = document.getElementById("tagContent" + i); i++) {
        j.style.display = "none";
    }
    document.getElementById(showContent).style.display = "block";
}
var x = 0;
function scrollTag() {
    var tags = document.getElementById("tags").getElementsByTagName("a");
    if (x < 2) {
        x = x + 1
    } else x = 0;
    var tag = document.getElementById("tags").getElementsByTagName("li");
    var taglength = tag.length;
    for (i = 0; i < taglength; i++) {
        tag[i].className = "";
    }
    tags[x].parentNode.className = "selectTag";
    for (i = 0; j = document.getElementById("tagContent" + i); i++) {
        j.style.display = "none";
    }
    document.getElementById("tagContent" + x).style.display = "block";
}
var scrolll = setInterval(scrollTag, 2000);
function zhuan() {
    clearInterval(scrolll);
}
function jixu() {
    scrolll = setInterval(scrollTag, 2000);
}
$(function(){
    var top=$('#navbar').offset().top;
    $(window).scroll(function(){
        if ($(window).scrollTop()>=top) 
             $("#navbar").addClass('topfixed');
            else  $("#navbar").removeClass('topfixed');
    });
}
);

css代码自己看着调吧
 
<br />