gpt4 book ai didi

html - 如何显示 div onclick 选项卡的内容

转载 作者:太空宇宙 更新时间:2023-11-04 13:47:05 24 4
gpt4 key购买 nike

我有标签和一些 div,当我单击标签时,应该显示特定的 div。

但是当我点击选项卡时,同时显示多个 div。如何在单击一个选项卡时只显示一个 div?

这是我的代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="ie-test">

<ul class="group" id="boxLinks">
<li><a href="#box1">Description</a></li>
<li><a href="#box2">Audience</a></li>
<li><a href="#box3">Objectives</a></li>
<li><a href="#box4">Prerequisites</a></li>
<li><a href="#box5">Duration</a></li>
</ul>
<div id="box">
<br>
<div class="box" id="box1">1</div>
<div class="box" id="box2">Another box!</div>
<div class="box" id="box3">Woot!</div>
<div class="box" id="box4">Another box!</div>
<div class="box" id="box5">Anotheasfr box!</div>
<br>
</div>
</div>
</body>
</html>

CSS

#ie-test {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#boxLinks {
list-style: none outside none;
overflow: hidden;
margin: 0;
padding: 0;
}
#boxLinks li {
display: inline;
}
#boxLinks li a {
border: 1px solid #CCCCCC;
color: black;
display: block;
float: left;
left: 1px;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none;
}
#boxLinks li a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#box {
border: 1px solid #CCCCCC;
height: 522px;
overflow: hidden;
padding: 0 30px;
position: relative;
top: -1px;
width: 90%;
}
.box {
display: block;
height: 250px;
position: relative;
}
#box1:target, #box2:target, #box3:target {
display: block;
height:auto;
}

最佳答案

试试 jquery tabs 或者如果你只想在 css 中使用这个。

.box {
display: none;
height: 250px;
position: relative;
}
#box1:target, #box2:target, #box3:target, #box4:target, #box4:target {
display: block;
height:auto;
}

关于html - 如何显示 div onclick 选项卡的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21300297/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com