很棒的一套tab切换滑动标签

<style>
.xiangguan {
    margin: 0 60px;
}
.xgtitle {
    font-size: 18px;
    display: block;
    height: 50px;
    line-height: 43px;
    font-weight: bolder;
    padding-top: 20px;
    color: #666;
    border-bottom: #f4f4f4 1px solid;
}
.xiangguan li {
    float: left;
    width: auto;
    cursor: pointer;
    padding-right: 30px;
}
.pleft h3.xgtitle li.hot{
	float:right !important;
	font-weight: normal;
	 padding-right: 0px !important;
}
.pleft h3.xgtitle li.hot a{
	display: inline-block;
	text-align: right;
	width: 60px;
	font-size:16px;
	color:#666;
}
.pleft h3.xgtitle li.hot a:hover,.pleft h3.xgtitle li.hot a.cur{
	color:#f00;
	font-size:16px;
	text-decoration: underline;
}
.news_lb li {
    height: 163px;
    padding: 16px 0px 20px 0px;
    overflow: hidden;
}
.news_left{
    width: 250px;
    height: 170px;
    float: left;
    overflow: hidden;
}
.news_left img{
    display: block;
    width: 250px;
    height: 170px;
}
.xg_right {
    float: right !important;
    width: 580px !important;
    height: 170px;
    line-height: 22px;
    padding-left: 30px;
}
.xg_right h3 {
    color: #09f !important;
    line-height: 26px;
    padding-left: 0;
    padding-bottom: 10px;
    display: block;
}
.news_lb h3 a {
    color: #32a7ff;
    text-decoration: none;
    font-size: 18px !important;
    font-weight: bold;
}
.news_right p {
    margin: 0 0 8px 0;
    height: 60px;
    line-height: 28px;
    overflow: hidden;
    display: inline-block;
}
.news_right a {
    color: #333;
    text-decoration: none;
    font-size: 14px !important;
}

.xiangguan .news_plun {
    float: right;
}
.xiangguan .news_plun li {
    float: left !important;
    padding-right: 15px !important;
}
.news_plun li {
    height: 26px !important;
    padding: 0 !important;
    overflow: hidden;
}
</style>
<script type="text/javascript" src="/skin/4.0/js/jquery-1.7.2.min.js"></script>
<div class="xiangguan">
<h3 class="xgtitle"><ul><li class="fontblue">最热文章</li><li class="hot"><a target="_self" href="javascript:latetablenewarticleswith('hostnews');" id="hostnews"  class="cur">最热</a><a target="_self" href="javascript:latetablenewarticleswith('latenews');" id="latenews">最新</a></li> </ul></h3>
<ul class="news_lb" id="hostnews_list" style="padding: 10px 0px; display: block;">
[e:loop={'selfinfo',5,1,1,'','onclick DESC'}]
<li data-id="<?=$bqr['id']?>">
<div class="news_left  photo">
<a href="<?=$bqsr['titleurl']?>">
<img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>" style="display: block;"></a></div>
<div class="news_right xg_right"><h3><a href="<?=$bqsr['titleurl']?>"><?=$bqr['title']?></a></h3><p>
<a href="<?=$bqsr['titleurl']?>">
<?php
$bqr[smalltext]=str_replace("  ","",$bqr[smalltext]);
?>
<?=$bqr[smalltext]?>
</a>
</p> 
<div class="news_plun hui2">
<ul>
<li class="storeup">阅读：<?=$bqr[onclick]?>次</li>
<li class="dzan"><?=date("Y-m-d",$bqr[newstime])?></li>
</ul>
</div>
</div>
</li>

[/e:loop]
</ul>
<ul class="news_lb" id="latenews_list" style="padding: 10px 0px; display: none;">
[e:loop={'selfinfo',5,0,1,'','newstime DESC'}]
<li data-id="<?=$bqr['id']?>">
<div class="news_left  photo">
<a href="<?=$bqsr['titleurl']?>">
<img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>" style="display: block;"></a></div>
<div class="news_right xg_right"><h3><a href="<?=$bqsr['titleurl']?>"><?=$bqr['title']?></a></h3><p>
<a href="<?=$bqsr['titleurl']?>">
<?php
$bqr[smalltext]=str_replace("  ","",$bqr[smalltext]);
?>
<?=$bqr[smalltext]?>
</a>
</p> 
<div class="news_plun hui2">
<ul>
<li class="storeup">阅读：<?=$bqr[onclick]?>次</li>
<li class="dzan"><?=date("Y-m-d",$bqr[newstime])?></li>
</ul>
</div>
</div>
</li>

[/e:loop]
</ul>
</div>
<script type="text/javascript">
function latetablenewarticleswith(k)
{
    $("#" + k).parent().prev().text(k == 'latenews' ?"最新文章":"最热文章");
    //latetableswithstate = k;
    $(".xiangguan .hot").find("a").removeClass('cur');
    $("#" + k).addClass('cur');
    $(".xiangguan .news_lb").hide();
    $("#" + k + "_list").show().find("img.lazy").lazyload({ effect: "fadeIn" });
}

 
</script>