html - 如何将按钮放入选项卡

标签 html css

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

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

我该如何解决这个问题？

我不得不说，当我点击 Room1 时，Tab 的两个键只出现在 Room2 Tab 上

<!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>

如果是，问题是您创建了 div Room1和 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 就可以避免 JS display: none如果你点击 Lights 里面的按钮.

关于html - 如何将按钮放入选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45540832/

上一篇：html - Z-index 不适用于功能区、背景和输入

下一篇：javascript - jQuery 灯箱，启动问题

相关文章：

javascript - 根据选定的单选按钮输入显示/隐藏 DIV

jquery - 图像元素不会缩放到 Firefox 或 Chrome 中的屏幕大小？

python - 使用 Flask 和 MySQL 创建事件管理器

jquery - 悬停颜色总是在 jquery 按钮集中的第一个按钮上触发 - 如何停止它？

css - 如何在 Twitter bootstrap sass 中创建列(alpha 4)

css - IE浏览器模式不同于文档模式

javascript - 当异步设置集合时，angular 1.3 中的 ng-option 会忘记 ngmodel

CSS 图像仅在一个 div 内

javascript - 单击一个 div 使另一个 div 出现/消失

css - JavaFX .setStyle 内联子元素

©2024 IT工具网  联系我们