<html> <head> <meta http-equiv="content=type" content="text/html;charset=gbk"/> <style> body,ul,li,img{ margin:0px; padding:0px; font-size:30px; } #d1{ margin-left:30px; margin-top:30px; width:400px; height:30px; } ul{ list-style-type:none; } ul li{ border:2px solid black; text-align:center; line-height:29px; float:left; width:60px; height:30px; background-color:#cccccc; cursor:pointer; margin-right:3px; } #d2{ border:2px solid blue; margin-left:30px; width:200px; height:100px; background-color:yellow; } #d3{ border:2px solid blue; margin-left:30px; width:200px; height:100px; background-color:green; } .hide{ display:none; } .select{ background-color:red; }
</style> <script> function doChange(index){ var u = document.getElementById("u1"); var lis = u.getElementsByTagName('li'); for(i=0;i<lis.length;i++){ lis[i].className=''; } var obj = document.getElementById('l'+index); obj.className='select'; var divs = document.getElementById('d2').getElementsByTagName('div'); for(i=0;i<divs.length;i++){ divs[i].style.display='none'; } document.getElementById('a'+index).style.display='block';
var divs2 = document.getElementById('d3').getElementsByTagName('div'); for(i=0;i<divs2.length;i++){ divs2[i].style.display='none'; } document.getElementById('b'+index).style.display='block'; } </script>
</head> <body>
<div id="d1"> <ul id="u1"> <li class="select" id="l1" onclick="doChange(1)">选项一</li> <li id="l2" onclick="doChange(2)">选项二</li> <li id="l3" onclick="doChange(3)">选项三</li> <li id="l4" onclick="doChange(4)">选项四</li> <li id="l5" onclick="doChange(5)">选项五</li> </ul> </div>
<div id="d2"> <div id="a1">选项一内容</div> <div id="a2" style="display:none;">选项二内容</div> <div id="a3" style="display:none;">选项三内容</div> <div id="a4" style="display:none;">选项四内容</div> <div id="a5" style="display:none;">选项五内容</div> </div> <div id="d3"> <div id="b1">选项一内容</div> <div id="b2" style="display:none;">选项二内容</div> <div id="b3" style="display:none;">选项三内容</div> <div id="b4" style="display:none;">选项四内容</div> <div id="b5" style="display:none;">选项五内容</div> </div> </body> </html>
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· ［.NET］调用本地 Deepseek 模型
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）