js实现tabs标签切换的代码一例

发布时间:2020-07-28编辑:脚本学堂
本文介绍下,用js实现tabs标签切换的一段代码,供大家学习参考。

代码如下:

<!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="&nbsp;&nbsp;&nbsp;&nbsp;" 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>