选项卡其实在很多网站站中可以看到。类似于切换导航。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} ul { list-style: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; } .hd { height: 45px; } .hd span { display: inline-block; width: 90px; background-color: pink; text-align: center; line-height: 45px; height: 45px; } .hd span.current { background-color: purple; } .content li { height: 255px; background-color: purple; display: none; } .content li.current { display: block; } </style> </head> <body> <div class="box" id="box"> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <div class="content"> <ul> <li class="current">体育模块</li> <li>娱乐模块</li> <li>新闻模块</li> <li>综合模块</li> </ul> </div> </div> <script type="text/javascript"> // 单击某个选项卡菜单时 1 当前菜单背景色为紫色 其他变为粉红 // 2 菜单对应的内容区域显示 其他隐藏 // 步骤1 先给所有的span进行绑定事件 var spns = document.getElementsByTagName("span"); var lis = document.getElementsByTagName("li"); for(var i=0; i<spns.length; i++) { spns[i].onclick = fn; } function fn() { // 1 当前菜单背景色为紫色 其他变为粉红 // 先干掉所有人 最后留下自己 // 移除所有span的class for(var i=0;i<spns.length; i++) { spns[i].setAttribute("index",i); spns[i].removeAttribute("class"); } // 让当前自己设置紫色背景 this表示 当前自己 就是表示当前事件源 this.setAttribute("class", "current"); // 2 菜单对应的内容区域显示 其他隐藏 // 单击第一个span 第一个li显示 其他隐藏 // 单击第二个span 第二个li显示 其他隐藏 // 先让所有内容隐藏 for(var i=0; i<lis.length; i++) { lis[i].removeAttribute("class"); } var index = this.getAttribute("index"); //alert(index); // 让菜单span对应的li显示 lis[index].setAttribute("class","current"); } </script> </body> </html>