代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用户信息-tabs标签切换-www.jb200.com</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/ask.css" /> </head> <body> <div class="userinfo"> <div class="title" id="title"> <a href="#" class="default" onclick="selectObj(this)" id="grzl">个人资料</a> <a href="#" class="current" id="xgmm" onclick="selectObj(this)">修改密码</a> <a href="#" class="default" id="xgtx" onclick="selectObj(this)">修改头像</a> </div> <div class="content"> <table cellpadding="0" cellspacing="3" border="0"> <tr> <td align="right"> <b>用户名:</b> </td> <td> Admin </td> </tr> <tr> <td align="right"> <b>当前密码:</b> </td> <td> <input type="text" /> </td> </tr> <tr> <td align="right"> <b>新密码:</b> </td> <td> <input type="text" /> </td> </tr> <tr> <td align="right"> <b>确认密码:</b> </td> <td> <input type="text" /> </td> </tr> <tr> <td> </td> <td> <input type="submit" value=" " class="btnok" /> </td> </tr> </table> </div> </div> <script type="text/javascript"> function selectObj(obj) { var objArray = document.getElementById("title").getElementsByTagName("a"); //得到title 下 所有 a 对象 为数组 var count = objArray.length; //得到数组selects长度 for (var i = 0; i < count; i++) { //将所有选项都置为不选中 objArray[i].className = "default"; } obj.className = "current"; //选中当前项 } </script> </body> </html>