实现一个简单的选项卡功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个选项卡</title> <style type = "text/css"> *{ padding:0; margin:0; } #main { width:600px; height:300px; background:white; border:2px solid red; position:relative; margin:50px auto; } ul { height:49px; background:grey; font-size:30px; line-height:49px; color:red; list-style-type:none; border-bottom:1px dotted grey; } li { width:200px; float:left; text-align:center; } li#active{ background:white; } p { font-size:40px; text-align:center; } .content>div { display:none; } .content>div#play { display:block; height:250px; background:red; } </style> </head> <body> <div id = "main"> <ul class = "lis"> <li id="active">电影</li> <li>娱乐</li> <li>数码</li> </ul> <div class = "content"> <div id = "play" class="action"> <p> this is a movie </p> </div> <div class="action"> <p> this is about entertainment </p> </div> <div class="action"> <p> this is about digital product </p> </div> </div> </div> </body> <script type = 'text/javascript'> var lis = document.getElementsByTagName("li"); var con = document.getElementsByClassName("action"); for(var i = 0; i < lis.length; i++){ lis[i].index = i; lis[i].onclick = function(){ for(var j = 0; j < lis.length; j++){ lis[j].id = ""; con[j].id = ""; } this.id = "active"; con[this.index].id = "play" } } </script> </html>