简单的HTML-DIV切换

xiaoxiao2021-02-27  292

HTML如下:

<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title>showdiv</title> <style> span{ cursor: pointer; } span:hover{ background-color: yellow; } div>div{ border: 1px solid black; width: 400px; height: 300px; } .hidden{ display: none; } </style> <script> function showDiv(str) { var divs = []; for(var i = 0;i < 4;i++) { divs[i] = document.getElementById("div" + i); divs[i].style.display = "none"; } document.getElementById(str).style.display = "block"; } </script> </head> <body> <div> <span onclick="showDiv('div0');">我的关注</span> <span onclick="showDiv('div1');">我的推荐</span> <span onclick="showDiv('div2');">我的导航</span> <span onclick="showDiv('div3');">我的视频</span> </div> <div> <div id="div0">我的关注</div> <div id="div1" class="hidden">我的推荐</div> <div id="div2" class="hidden">我的导航</div> <div id="div3" class="hidden">我的视频</div> </div> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-7164.html

最新回复(0)