<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tab选项卡代码</title> <style type="text/css"> .title { width: 500px; height: 50px; color: black; border: 1px solid gray; margin: 0; display: flex; } .title span { width: 80px; height: 50px; line-height: 50px; text-align: center; float: left; font-family: "微软雅黑"; font-size: 24px; flex: 1; border-right: 1px solid black; } .title span:nth-child(3){ border-right: none; } .tab { color: red; background-color: #999; cursor: pointer; } #tab>div { width: 500px; height: 200px; border: 1px solid gray; display: none; text-align: center; line-height: 200px; font-family: "微软雅黑"; font-size: 24px; } #tab .content { display: block; } </style> </head> <body> <div id="tab"> <h2 class="title"> <span class="tab" onmouseover="changeTab(this)">选项一</span> <span onmouseover="changeTab(this)">选项二</span> <span onmouseover="changeTab(this)">选项三</span> </h2> <div class="content" style="background: greenyellow;">内容一</div> <div style="background: cyan;">内容二</div> <div style="background: goldenrod;">内容三</div> </div> </body> </html> <script type="text/javascript"> // 获取所有的span标签组 var tabs = document.getElementById("tab").getElementsByTagName("span"); // 获取所有的div标签组 var cts = document.getElementById("tab").getElementsByTagName("div"); function changeTab(current) { for(i = 0; i < tabs.length; i++) { if(tabs[i] == current) { tabs[i].className = "tab"; cts[i].className = "content"; } else { tabs[i].className = ""; cts[i].className = ""; } } } </script>
tab选项卡简易代码
猜你喜欢
转载自blog.csdn.net/qq_41115965/article/details/80572001
今日推荐
周排行