当前位置：首页 → 问答吧 → tab 切换问题~~~~

tab 切换问题~~~~

时间：2011-07-23

来源：互联网

在页面中多个表单多个INPUT 控件但只想在3个input控件TAB循环切换~ 这个要怎么实现捏？？=。+！

作者: zhx20399 发布时间: 2011-07-23

HTML code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
body{font-size:12px; color:#000; text-align:center;}
</style>
</head>

<body>
    <input type="button" value="tab_01" />
    <input type="button" value="tab_02" />
    <input type="button" value="tab_03" />
    <div>
        <form>
            <table>
                <tr>
                    <td><input type="text" /></td>
                    <td>1</td>
                </tr>
            </table>
        </form>
    </div>
    <div style="display:none;">
        <form>
            <table>
                <tr>
                    <td><select><option>--请选择--</option></select></td>
                    <td>2</td>
                </tr>
            </table>
        </form>
    </div>
    <div style="display:none;">
        <form>
            <table>
                <tr>
                    <td><input type="file" /></td>
                    <td>3</td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        var inps = document.getElementsByTagName('input'),
        len = inps.length,
        divs = document.getElementsByTagName('div');
        
        for(var i = 0; i < len; i++){
            !function(i){
                inps[i].onclick = function(){
                    divs[i].style.display = 'block';
                    
                    for(var j = 0; j < divs.length; j++){
                        if(j != i){
                            divs[j].style.display = 'none';    
                        }    
                    }    
                };    
            }(i)    
        }
    </script>
</body>
</html>

作者: MuBeiBei 发布时间: 2011-07-23

tab 切换问题~~~~

热门阅读

热门下载