CSS
.ele{ height: 20px;}ul{ list-style: none;}ul li { padding-right: 30px; float: left;}a { text-decoration: none; color: black;}.active a { border-bottom: 2px solid #F40;}a:hover{ color: #f40;}.elec { width: 220px; margin-top: 5px; margin-left: 40px;overflow-x: auto; }.elec p { padding-left: 2px; border-left: 1px solid #f40; font-size: 14px; overflow: hidden;/*溢出暗藏*/ text-overflow:ellipsis;/*暗藏局部显示省略号*/ white-space: nowrap;/*文本一行显示*/}HTML
<!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>JS
<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>