Recently, I have been learning js. When I was looking for js special effects in the past, I would go online to find code. Later, I found that some special effects might not be suitable for me and needed to be modified. I didn't understand it. So what to do? Just learn. Recently, after learning js and hoping to learn js, friends have communicated more, and without saying much, they have posted a sliding door special effect with very little code.
<div class=”top_nav_news_right”>
<div class=”index_news_right_top”>
<ul>
<li><span class="hdm_01″ id=" hdm0 ″ onmousemove="javascript:hd(0);"> Recommended</span></li>
<li><span id="hdm1 ″ onmousemove=" javascript:hd(1);"> Boutique</span></li>
<li><span id="hdm2 ″ onmousemove=" javascript:hd(2);"> Hot spots</span></li>
<li><span id="hdm3 ″ onmousemove=" javascript:hd(3);"> Gather</span></li>
</ul>
</div>
<div class=”news_right_content” style=”display:block;” id=”tx_hd0″>
<ul>
<li><a href="#">1QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
</ul>
</div>
<div class=”news_right_content” style=”display:none;” id=”tx_hd1″>
<ul>
<li><a href="#">2QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
</ul>
</div>
<div class=”news_right_content” style=”display:none;” id=”tx_hd2″>
<ul>
<li><a href="#">3QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
</ul>
</div>
<div class=”news_right_content” style=”display:none;” id=”tx_hd3″>
<ul>
<li><a href="#">4QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</a></li>
<li><a href="#">QQ chat assistant makes it easier to chat and search</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>
Some friends copied the code and found out why the page was so messy. Dear, this is normal. Because there is no style inside. Just apply the completed page directly.