tab滑动 菜单

tab滑动 菜单

<style>
*{font-size:12px}

#info {width:480px;}

#info ul{margin:0;padding:0;width:480px;list-style:none;color:#2F5FA1;}

#info li{float:left;background:#F4FBFF;border-right:1px solid #FFF;padding:3px 8px 3px 8px;cursor: pointer}

#info .tag-selected{background:#D0E9F7;padding:0;margin:0;padding:3px 8px 3px 8px;}

#info .content{border:1px solid #A6CBE7;padding:5px 3px 5px 3px;background-color:#FDFDFD;}

#info .cleard{clear:both;}

</style>

<script>

function dayrui_tab(tag){
for(i=1; i <6; i++){
if (i==tag) {
document.getElementById("tag"+i).className="tag-selected";
document.getElementById("info"+i).style.display="block";
}else{
document.getElementById("tag"+i).className="";
document.getElementById("info"+i).style.display="none";
}
}
}
</script>

<div id="info" >

<ul>

<li class="tag-selected" id="tag1" onmousemove="dayrui_tab('1');">热门活动</li>

<li class="tag" id="tag2" onmousemove="dayrui_tab('2');">最新功能</li>

<li class="tag" id="tag3" onmousemove="dayrui_tab('3');">服务承诺</li>

<li class="tag" id="tag4" onmousemove="dayrui_tab('4');">最新成功故事</li>

<li class="tag" id="tag5" onmousemove="dayrui_tab('5');">热贴推荐</li>

<div class="cleard"></div>

</ul>

<div class="content" id="info1">

<a href="http://www.226511.cn" target="blank">热门活动</a></div>

<div class="content" id="info2" style="display: none;">

<a href="http://www.226511.cn" target="blank">最新功能</a></div>

<div class="content" id="info3"  style="display: none;">

<a href="http://www.226511.cn" target="blank">服务承诺</a></div>

<div class="content" id="info4" style="display: none;">

<a href="http://www.226511.cn" target="blank">最新成功故事</a></div>

<div class="content" id="info5" style="display: none;">

<a href="http://www.226511.cn" target="blank">热贴推荐</a></div>

</div>

补充：网页制作,js教程 

上一个：JS验证电话号码
下一个：提交后按钮变成灰色