CSS/HTML/JS按钮控制div显示失效问题排查与方案咨询

嘿，我帮你找出了几个导致按钮功能失效的关键问题，咱们一步步拆解修复：

一、核心错误点 #

1. JavaScript语法错误（最致命） #

你的checkForm3和checkForm4函数里，if条件的末尾多了一个多余的||，这会直接导致脚本解析失败，后续的Funz1、Funz2函数根本无法执行。比如：

// 错误写法
if(document.registration_form.luogo.value == '' || document.registration_form.titolo.value == '' || document.registration_form.anno.value == '' || ) {

必须去掉最后那个多余的||。

2. 表单对象引用错误 #

你的表单分别命名为studio_form和lavoro_form，但校验函数里却用了document.registration_form，这会找不到目标表单，导致校验逻辑报错。

3. HTML属性语法问题 #

• d2和d3的style属性没有用引号包裹，正确写法是style="display:none"
• d3的form标签加了disabled属性，这会让表单一直处于禁用状态，提交按钮无法点击，需要移除这个属性

二、修正后的完整代码 #

<head>
    <title>Aggiungi Studi e Lavori</title> 
    <script type='text/javascript'> 
        function Funz1() { 
            document.getElementById("d1").style.display = "none"; 
            document.getElementById("d2").style.display = "none"; 
            document.getElementById("d3").style.display = "block"; 
        } 
        function Funz2() { 
            document.getElementById("d1").style.display = "none"; 
            document.getElementById("d2").style.display = "block"; 
            document.getElementById("d3").style.display = "none"; 
        } 
        function checkForm3() { 
            // 修正：引用正确的表单对象，去掉多余的||
            if(document.studio_form.luogo.value == '' || document.studio_form.titolo.value == '' || document.studio_form.anno.value == '') { 
                alert('Inserire tutti i dati contrassegnati con un asterisco'); 
                return false; 
            } 
            return true; 
        } 
        function checkForm4() { 
            // 修正：引用正确的表单对象，去掉多余的||
            if(document.lavoro_form.luogo2.value == '' || document.lavoro_form.ruolo.value == '' || document.lavoro_form.anno2.value == '') { 
                alert('Inserire tutti i dati contrassegnati con un asterisco'); 
                return false; 
            } 
            return true; 
        } 
    </script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <br> 
    <div id="d1"> 
        <button type="button" onclick="Funz1()">Aggiungi Esperienza Lavorativa</button> 
        <button type="button" onclick="Funz2()"> Aggiungi Esperienza di Studio</button> 
    </div> 
    <!-- 修正：style属性添加引号 -->
    <div id="d2" style="display:none"> 
        <br>
        <form name='studio_form' action='Esperienze.php' method='post' onsubmit='return checkForm3()' > 
            <div class='row'> 
                <div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'> 
                    <label for='titolo'>Titolo</label> 
                    <input type='text' name='titolo'> 
                </div> 
                <div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'> 
                    <label for='anno'>Anno</label> 
                    <input type='text' name='anno'> 
                </div> 
                <div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'> 
                    <label for='luogo'>Luogo</label> 
                    <input type='date' name='luogo'> 
                </div> 
                <div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'> 
                    <input name='submit' type='submit' value='Aggiungi'> 
                </div> 
            </div> 
        </form> 
    </div> 
    <!-- 修正：style属性添加引号，移除disabled属性 -->
    <div id="d3" style="display:none"> 
        <form name='lavoro_form' action='Esperienze.php' method='post' onsubmit='return checkForm4()'> 
            <div class='row'> 
                <div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'> 
                    <label for='ruolo'>Ruolo</label> 
                    <input type='text' name='ruolo'> 
                </div> 
                <div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'> 
                    <label for='anno2'>Anno</label> 
                    <input type='text' name='anno2'> 
                </div> 
                <div class='form-group col-xs-12 col-md-6 col-sm-6 col-lg-6'> 
                    <label for='luogo2'>Luogo</label> 
                    <input type='date' name='luogo2'> 
                </div> 
                <div class='form-group col-xs-12 col-md-12 col-sm-12 col-lg-12'> 
                    <input name='submit' type='submit' value='Aggiungi'> 
                </div> 
            </div> 
        </form> 
    </div> 
</body> 
</html>

三、更简洁的实现方式（利用jQuery） #

既然你已经引入了jQuery，可以用它简化DOM操作，代码会更清爽：

// 替换原来的Funz1和Funz2
function Funz1() {
    $("#d1, #d2").hide();
    $("#d3").show();
}
function Funz2() {
    $("#d1, #d3").hide();
    $("#d2").show();
}

// 简化表单校验
function checkForm3() {
    const isEmpty = $("#studio_form input").filter(function() {
        return !$(this).val().trim();
    }).length > 0;
    if(isEmpty) {
        alert('Inserire tutti i dati contrassegnati con un asterisco');
        return false;
    }
    return true;
}

function checkForm4() {
    const isEmpty = $("#lavoro_form input").filter(function() {
        return !$(this).val().trim();
    }).length > 0;
    if(isEmpty) {
        alert('Inserire tutti i dati contrassegnati con un asterisco');
        return false;
    }
    return true;
}

内容的提问来源于stack exchange，提问作者MrCaptain Alex