X-PcMobi主题的热门文章/随机文章Tab选项卡切换基本完成，热门文章是现在emlog常用的来自蓝叶博客的30天按点击率排行文章，随机文章是emlog自带的，两者分别起着推荐热门吸引读者的文章，增加旧文章的曝光率的作用。利用选项卡的方式，可以把两者结合起来。

实现代码主要参考自tab选项卡新闻列表切换效果代码，有兴趣可以进去下载测试。这里博主笑忘书写下如何用在emlog文章各种榜单的切换。

1.首先打开模板的module.php文件，在后面加入整合后的热门文章和随机文章代码：

<?php
//30天按点击率排行文章
function hotlog(){
$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;
?>

<div id="sidelog">

<h3 class="up" id="lognav1" onclick="tab('log',1,2);">热门文章</h3>
<div id="log1" class="block"><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="one"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="two"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="three"><?php echo $i;?></em>
<?php }else{ ?><em class="SoSo"><?php echo $i;?></em>
<?php }?>
<?php echo $row['title']; ?></a></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php
//widget：随机文章
function random_log(){
	$Log_Model = new Log_Model();
	$randLogs = $Log_Model->getRandLog(8);$i=1;
?>
<h3 id="lognav2" onclick="tab('log',2,2);">随机文章</h3>
<div class="clear"></div>
<div id="log2"><ul>
<?php foreach($randLogs as $value): ?>
<li><a href="<?php echo Url::log($value['gid']); ?>">
<?php if($i==1){?><em class="one"><?php echo $i;?></em>
<?php }else if($i==2){ ?><em class="two"><?php echo $i;?></em>
<?php }else if($i==3){ ?><em class="three"><?php echo $i;?></em>
<?php }else{ ?><em class="SoSo"><?php echo $i;?></em>
<?php }?>
<?php echo $value['title']; ?></a></li>
<?php $i++; endforeach; ?>
</ul>
</div></div>
<?php }?>

修改显示文章数(代码中的8)，$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"和$randLogs = $Log_Model->getRandLog(8);。

2.接着在side.php里加入调用代码：

<?php hotlog();?><!--热门文章-->
<?php random_log();?><!--随机文章-->

3.在footer.php接入相应的JS：

<script>
function tab(name,num,n){
for(i = 1;i <= n;i++){
var menu = document.getElementById(name+"nav"+i);
var cont = document.getElementById(name+i);

menu.className = i == num ? "up" : "";
if(i == num){
cont.style.display = "block";
} 
else{
cont.style.display = "none";
}
}}
</script>

原理是给每个选项卡设定一个含1到n的数字的ID，逐一检索，将选择的列表打开，将未选择的关闭。



4.本站使用的CSS，还不够完善，请自行修改：

#sidelog{
width:100%;height:23.0em; position:relative;margin:0.5em 0;padding:0;
}
#sidelog ul{
list-style:none;margin:0;padding:0;
}
#sidelog li{
margin:0;
}
#sidelog div {
position:absolute;top:2.8em; left:0; width:100%;height:20em;
}
#sidelog div {
display:none;
}
#sidelog h3{
float:left;width:50%;cursor:pointer; text-align:center;font-family:Microsoft YaHei;
margin:0;display:inline-block
}
#sidelog .up {
background:#f5f5f5;color:#000;box-shadow:1px 0 5px #bbb 
}
#sidelog .block{
display:block;
}
#sidelog li a{
display:block;padding:;border-bottom:1px solid #ccc;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#sidelog li em{
padding:0.3em 0.5em;border-radius:5px;
color:#fff;margin-right:0.5em;border-radius:2px;box-shadow:1px 1px 5px #ccc;
}
#sidelog .one{background-color:#e04620}
#sidelog .two{background-color:#00ccff}
#sidelog .three{background-color:#03bf03}
#sidelog .SoSo{background-color:#aaaaaa}

放在main.css文件里即可

感谢作者：笑忘书的投稿，欢迎大家投稿： https://www.blogs.hk/post-87.html