lights

lights

关注
发信
关注(28)粉丝(399)

html - 如何将按钮放入标签

我已经创建了一些HTML和CSS代码

我有3个主标签（Lights，Kitchen，Others），当我在Lights主标签中编写此代码时，我想要两个其他标签，这些标签的名称分别是Room1和Room2
并且在此代码中，每个主选项卡中都有一些按钮，但是由于创建了Room1和Room2选项卡，键：LTurnOn和LTurnOff（对于Room1选项卡）以及CTurnOn和CTurnOff（对于Room2选项卡）消失了。

我怎样才能解决这个问题？

我不得不说，我想在单击Room1时只出现选项卡的两个键，以此类推



<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
      background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #000000;
    border-top: none;
}

.button {
    position: relative;
    background-color: #000000;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("http://free4kwallpaper.com/wp-content/uploads/2016/01/New-Age-4K-Abstract-Wallpapers.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

</style>

</head>
<body>


<div class="tab">
  <button class="tablinks" onclick="Tools(event, 'Lights')">Lights</button>
  <button class="tablinks" onclick="Tools(event, 'Kitchen')">Kitchen</button>
  <button class="tablinks" onclick="Tools(event, 'Other')">Other</button>
</div>



<div id="Lights" class="tabcontent">
<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Room1')">Room1</button>
</div>
<div id="Room1" class="tabcontent">
<form>
  Turn On:<br>
  <input class="button" type="submit" name="Turn On" value="LTurn On" >
  <br>
  Turn Off:<br>
  <input class="button" type="submit" name="Turn Off" value="LTurn Off">
</form>
</div>
<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Room2')">Room2</button>
</div>
<div id="Room2" class="tabcontent">
<form>
  Turn On:<br>
  <input class="button" type="submit" name="Turn On" value="CTurn On" >
  <br>
  Turn Off:<br>
  <input class="button" type="submit" name="Turn Off" value="CTurn Off">
</form>
</div>
</div>
<div id="Kitchen" class="tabcontent">
<form>
  Turn On:<br>
  <input class="button" type="submit" name="Turn On" value="KTurn On">
  <br>
  Turn Off:<br>
  <input class="button" type="submit" name="Turn Off" value="KTurn Off">
</form>

</div>

<div id="Other" class="tabcontent">
<form>
  Turn On:<br>
  <input class="button" type="submit" name="Turn On" value="OTurn On">
  <br>
  Turn Off:<br>
  <input class="button" type="submit" name="Turn Off" value="OTurn Off">
</form>

</div>
<div class="bg"></div>

<script>
function Tools(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

</body>
</html>

最佳答案

你想要这样吗？



<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: "Lato", sans-serif;
    }
    /* Style the tab */

    div.tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    /* Style the buttons inside the tab */

    div.tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }
    /* Change background color of buttons on hover */

    div.tab button:hover {
      background-color: #ddd;
    }
    /* Create an active/current tablink class */

    div.tab button.active {
      background-color: #ccc;
    }
    /* Style the tab content */

    .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #000000;
      border-top: none;
    }

    .button {
      position: relative;
      background-color: #000000;
      border: none;
      font-size: 28px;
      color: #FFFFFF;
      padding: 20px;
      width: 200px;
      text-align: center;
      -webkit-transition-duration: 0.4s;
      /* Safari */
      transition-duration: 0.4s;
      text-decoration: none;
      overflow: hidden;
      cursor: pointer;
    }

    .button:after {
      content: "";
      background: #90EE90;
      display: block;
      position: absolute;
      padding-top: 300%;
      padding-left: 350%;
      margin-left: -20px!important;
      margin-top: -120%;
      opacity: 0;
      transition: all 0.8s
    }

    .button:active:after {
      padding: 0;
      margin: 0;
      opacity: 1;
      transition: 0s
    }

    body,
    html {
      height: 100%;
      margin: 0;
    }

    .bg {
      /* The image used */
      background-image: url("http://free4kwallpaper.com/wp-content/uploads/2016/01/New-Age-4K-Abstract-Wallpapers.jpg");
      /* Full height */
      height: 100%;
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>

</head>

<body>


  <div class="tab">
    <button class="tablinks" onclick="Tools(event, 'Lights')">Lights</button>
    <button class="tablinks" onclick="Tools(event, 'Kitchen')">Kitchen</button>
    <button class="tablinks" onclick="Tools(event, 'Other')">Other</button>
  </div>



  <div id="Lights" class="tabcontent">
    <div class="tab">
      <button class="tablinks" onclick="Tools(event, 'Room1')">Room1</button>
    </div>

    <div class="tab">
      <button class="tablinks" onclick="Tools(event, 'Room2')">Room2</button>
    </div>

  </div>
  <div id="Room1" class="tabcontent">
    <form>
      Turn On:<br>
      <input class="button" type="submit" name="Turn On" value="LTurn On">
      <br> Turn Off:<br>
      <input class="button" type="submit" name="Turn Off" value="LTurn Off">
    </form>
  </div>
  <div id="Room2" class="tabcontent">
    <form>
      Turn On:<br>
      <input class="button" type="submit" name="Turn On" value="CTurn On">
      <br> Turn Off:<br>
      <input class="button" type="submit" name="Turn Off" value="CTurn Off">
    </form>
  </div>
  <div id="Kitchen" class="tabcontent">
    <form>
      Turn On:<br>
      <input class="button" type="submit" name="Turn On" value="KTurn On">
      <br> Turn Off:<br>
      <input class="button" type="submit" name="Turn Off" value="KTurn Off">
    </form>

  </div>

  <div id="Other" class="tabcontent">
    <form>
      Turn On:<br>
      <input class="button" type="submit" name="Turn On" value="OTurn On">
      <br> Turn Off:<br>
      <input class="button" type="submit" name="Turn Off" value="OTurn Off">
    </form>

  </div>
  <div class="bg"></div>

  <script>
    function Tools(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  </script>

</body>

</html>





如果是，则问题是您在Room1内部创建了divs Room2和Lights。单击触发Tools()的按钮，它将从active中删除​​Lights，内容将为display: none。

我固定的示例是您如何解决的一种解决方案。我只是将<div id="Room1" class="tabcontent">和<div id="Room2" class="tabcontent">从<div id="Lights" class="tabcontent">中移出了，并且它起作用了。

如果您不想将div从Lights移出，则只需修复JS即可避免单击display: none内的按钮时JS将Lights移出。

09-25 16:12
Powered by LMLPHP ©2024 lights 0.039309