js实现的最简单的滑动门

近期在学习js，以前找js特效的时候，都是去网上找代码，后来发现有的特效可能不适合自己，需要再修改修改不懂，那怎么办，就学习呗。近期在学习js希望会js 的小伙伴们多交流下，不多说了下面发下一个代码很少的滑动门特效。

<div class="top_nav_news_right">
<div class="index_news_right_top">
<ul>
<li><span class="hdm_01" id="hdm0" onmousemove="javascript:hd(0);">推荐</span></li>
<li><span id="hdm1" onmousemove="javascript:hd(1);">精品</span></li>
<li><span id="hdm2" onmousemove="javascript:hd(2);">热点</span></li>
<li><span id="hdm3" onmousemove="javascript:hd(3);">聚集</span></li>
</ul>
</div>
<div class="news_right_content" style="display:block;" id="tx_hd0">
<ul>
<li><a href="#">1QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
</ul>
</div>
<div class="news_right_content" style="display:none;" id="tx_hd1">
<ul>
<li><a href="#">2QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
</ul>
</div>
<div class="news_right_content" style="display:none;" id="tx_hd2">
<ul>
<li><a href="#">3QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
</ul>
</div>
<div class="news_right_content" style="display:none;" id="tx_hd3">
<ul>
<li><a href="#">4QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
<li><a href="#">QQ聊天助手　边聊边搜更轻松</a></li>
</ul>
</div>
</div>
<script>
function hd(num){

for(var id = 0;id<4;id++)
{
if(id==num)
{
document.getElementById("tx_hd"+id).style.display="block";
document.getElementById("hdm"+id).className="bg_block";
}
else
{
document.getElementById("tx_hd"+id).style.display="none";
document.getElementById("hdm"+id).className="bg_none";
}
}
}</script>

有的朋友复制了代码后发现怎么页面那么乱，亲这是正常的。因为里面没样式。做好的页面直接套用就好。