如何将Button放入Tabs

时间：2017-08-07 06:45:45

标签： html css

我创建了一些HTML和CSS代码

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

我该如何解决这个问题？

我不得不说，当我点击Room1时，我想要只显示标签的两个键，以及Room2 Tab

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

你想要这样吗？

<!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内创建了div 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内。

答案 1 :(得分：0)

为什么如此令人困惑你已经把名称作为厨房，为什么再给房间它复杂的使用名称，如大厅，厨房，卧室，所以你不需要给room1或room2和灯光你可以组合框灯关灯，灯上

答案 2 :(得分：0)

你去吧！我在按钮上添加了一个数据城，并稍微编辑了你的javascript :) 

<!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" data-city="Lights" onclick="Tools(event)">Lights</button>
      <button class="tablinks" data-city="Kitchen" onclick="Tools(event)">Kitchen</button>
      <button class="tablinks" data-city="Other" onclick="Tools(event)">Other</button>
    </div>



<div id="Lights" class="tabcontent">
    <div class="tab">
        <button class="tablinks" data-city="Room1" onclick="Tools(event)">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" data-city="Room2" onclick="Tools(event)">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){
        var city = evt.currentTarget.getAttribute('data-city');
        var parent = evt.currentTarget.parentElement;
        var tabcontent = parent.parentElement.getElementsByClassName("tabcontent");
        var tablinks = document.getElementsByClassName("tablinks");
        for(i=0;i< tabcontent.length;i++){
            tabcontent[i].style.display = 'none';
            tabcontent[i].className="tabcontent";
            tablinks[i].className="tablinks";

        }
        tabcontent[city].style.display = 'block';
        tabcontent[city].className += " active";
        evt.currentTarget.className += " active";
        
    }
</script>

</body>
</html>

相关问题
最新问题