0
我已经创造了一些HTML和CSS代码如何把按钮进入标签
我有3个主要标签（灯光，厨房，其他），并为我写在灯主选项卡这个代码，我想其他两个选项卡，这些选项卡的名称是Room1和Room2 ，并且在此代码中，我在每个主选项卡中都有一些按钮，但由于我创建了选项卡Room1和Room2，键：LTurnOn和LTurnOff（用于选项卡Room1）以及CTurnOn和CTurnOff（用于选项卡Room2）消失了。
我该如何解决这个问题？
我必须说，我希望当我点击房间1
<!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>
哦感谢帕特里克说正是我想要的东西，还有一个问题，我可以设计标签时我点击标签背面显示标签下，如你现在看到的这是白色当我点击标签我想要的选项卡包括壁纸 – amiroruji72
你想要tabcontent有墙纸作为背景？你可以在你的样式中添加'bg'到所有的类，比如'class =“tabcontent bg”'或者添加'.tabcontent，'到'.bg'。这看起来像这样：'.tabcontent，.bg {...}' –
非常感谢你 – amiroruji72