Question

#chkinDIV {

        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

    #roomDIV {

        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

    #roomcatDIV{


        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }


    #chkoutDIV {

        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }
    #HsetupDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

     #currencyDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;

    }

    #marketDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

    #travelagDIV{
             width: 100%;
             display: none;
             border-radius: 5px;
             border: 1px solid black;

         }
    #roommasterDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;

    }

    #guestmasterDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

    #guestmessageDIV{
         width: 100%;
         display: none;
         border-radius: 5px;
         border: 1px solid black;
     }

    #guestlocationDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

    #forecastDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

     #entryDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

    #taNewDIV{
        width: 100%;
        display: none;
        border-radius: 5px;
        border: 1px solid black;
    }

<!--currency-->
    <div id="currencyDIV" >
        <div class="container">
            <h4>Currency</h4>
            <form class="form-inline" >
                <div class="form-group">
                    <label for="RoomID">Currency Code:</label>
                    <input type="text" class="form-control" id="ccode" onkeypress="validate()">
                    <label for="Room Name">Curreny Name:</label>
                    <input type="text" class="form-control" id="cname" onkeypress="validate()"><br/>
                    <label for="Price">Rate:</label>
                    <input type="number" class="form-control" id="crate" onkeypress="validate()">
                    <label for="Price">Convertion Rate:</label>
                    <input type="text" class="form-control" id="ccnverrate" disabled>
                    <br/><br/>
                    <button type="button" id="sub" value="submit" name="submit" class="btn btn-success" onclick="currValidate()">Submit </button>
                    <button type="submit" value="submit" name="submit" class="btn btn-default" onclick=" document.getElementById('cancel').style.display='none';">Edit </button>
                    <button type="submit" value="submit" name="submit" id="cancel" class="btn btn-danger" onclick="document.getElementById('currencyDIV').style.display='none';">Cancel </button>
                    <br/>
                </div>
            </form>
        </div>
</div>

 <!--rooms DIV-->
    <div id="roomDIV">
        <div class="container">
            <h4>Room Type</h4>
            <form class="form-inline" action="/action_page.php">
                <div class="form-group">
                    <label for="RoomID">Room ID:</label>
                    <input type="text" class="form-control" id="rmid">
                    <label for="Room Name">Room Name:</label>
                    <input type="text" class="form-control" id="rmname">
                    <label for="Price">Price:</label>
                    <input type="text" class="form-control" id="rmprice"><br/><br/>
                    <button type="submit" value="submit" name="submit" class="btn btn-success">Submit </button>
                    <button type="submit" value="submit" name="submit" class="btn btn-default">Edit </button><br/>
                </div>
            </form>
        </div>
    </div>

<!--Check-in DIV-->
    <div id="chkinDIV">
        <div class="container">
            <h3>Check - in</h3>
            <form class="form-inline" action="/action_page.php">
                <div class="form-group">
                    <label for="chkin">Check in ID:</label>
                    <input type="text" class="form-control" id="hname">
                    <label for="rsrvid">Reserve ID:</label>
                    <input type="text" class="form-control" id="rsrvid">
                    <label for="Arrival">Arrival:</label>
                    <input type="text" class="form-control" id="arrival">
                    <label for="time">Time:</label>
                    <input type="text" class="form-control" name="birthday" value="10/24/2001"/><br/><br/>
                    <button type="submit" value="submit" name="submit" class="btn btn-success">Submit </button>
                    <button type="submit" value="submit" name="submit" class="btn btn-default">Edit </button><br/>


        </div>
            </form>
    </div>
    </div>

    <!--chkout DIV-->

    <div id="chkoutDIV">
        <div class="container">
            <h4>Check out</h4>
            <table class="table" >
                <tbody>
                <tr>
                    <td>Reserve ID</td>
                    <td> <input type="text" class="form-control" id="chkout_id"></td>
                    <td>Date</td>
                    <td> <input type="text" class="form-control" name="birthday" value="10/24/2001"/></td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>

    <!--Hotel setup DIV-->

    <div id="HsetupDIV">
        <div class="container">
            <h4 text align="center">Hotel Setup</h4>
            <form class="form-inline" action="/action_page.php">
                <div class="form-group">
                    <label for="Hotel Name">Hotel Name:</label>
                    <input type="text" class="form-control" id="hname">
                    <label for="Slogan">Slogan:</label>
                    <input type="text" class="form-control" id="slogan">
                    <label for="Phone">E-mail:</label>
                    <input type="email" class="form-control" id="email">
                    <label for="Phone">Phone:</label>
                    <input type="text" class="form-control" id="phoneN"><br/><br/>
                    <label for="Slogan">Address Line 1:</label>
                    <input type="text" class="form-control" id="adln1"><br/><br/>
                    <label for="Phone">Address Line 2:</label>
                    <input type="text" class="form-control" id="adln2"><br/><br/>
                    <label for="Phone">Address Line 3:</label>
                    <input type="text" class="form-control" id="adln3"><br/><br/>
                    <button type="submit" value="submit" name="submit" class="btn btn-success">Submit </button>
                    <button type="submit" value="submit" name="submit" class="btn btn-default">Edit </button><br/>
                </div>
            </form>
        </div>
    </div>

我具有显示特定div的功能[在此处 currencyDiV ]。此函数接受所有div变量，并检查是否显示指定的div [此处 currencyDiV ]。如果不是这样，则会隐藏所有其他div并显示相关的div [此处 currencyDiV ]。尽管这样做是为了在执行此操作之前执行直到[a.style.display =“ none”;]语句和不是下面的。新的div显示在现有分区的下面[此处 currencyDiV ]，而不会隐藏其他div。

当我按下一个按钮以显示指定的div时，将执行此功能 [此处 currencyDiV ]。这与我编写的用于显示和隐藏div的所有其他功能相同。这些功能最多只能执行四个语句

任何人都可以在这里说出我在做什么错或提出解决方案吗？

function currencyDIVshow() {
    var x = document.getElementById("chkinDIV");
    var y= document.getElementById("roomDIV");
    var z=document.getElementById("chkoutDIV");
    var a = document.getElementById("HsetupDIV");
    var b=document.getElementById("roommasterDIV");
    var c = document.getElementById("currencyDIV");
    if (c.style.display === "none") {
        c.style.display = "block";
        y.style.display="none";
        z.style.display="none";
        a.style.display="none";
        b.style.display="none";
        x.style.display="none";
    } else {
        c.style.display = "none";
    }
}

这是HTML代码

    <div class="btn-group">
        <div class="dropdown-menu" style="width: 50px; background-color:#178bb5; color: black;">
            <a class="btn btn-block btn" href="#" onclick="currencyDIVshow()" role="button" style="margin-bottom: 5px; color: white; text-align: left">Currency</a>

        </div>
    </div>

单击容器div 的 currency div时，该功能正在起作用[此处 currencyDIVshow（）]功能。

样式

 #currencyDIV{
    width: 100%;
    display: none;
    border-radius: 5px;
    border: 1px solid black;

}

Answer 1

我认为这种方法有些棘手，现在您可以使用它来解决问题了：

更改您的陈述条件：
```
if(c.style.display !== "block")
```

从CSS删除display: none并在功能之前在javascript中添加无显示内容：

c.style.display = 'none'
function currencyDIVshow() {
  var x = document.getElementById("chkinDIV");
  var y= document.getElementById("roomDIV");
  var z=document.getElementById("chkoutDIV");
  var a = document.getElementById("HsetupDIV");
  var b=document.getElementById("roommasterDIV");
  var c = document.getElementById("currencyDIV");
  if (c.style.display === "none") {
    c.style.display = "block";
    y.style.display="none";
    z.style.display="none";
    a.style.display="none";
    b.style.display="none";
    x.style.display="none";
  } else {
   c.style.display = "none";
  }
}

Answer 2

没有ID为“ roommasterDIV”的元素

因此，您的javascript即将上线：

b.style.display="none";

并且失败-如果您注释掉该行，或者添加具有该ID的元素，它将可以正常工作。

五个语句后，JavaScript语句将不起作用

2 个答案: