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

标签 html css

我有标签和一些 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/

相关文章:

html - 垂直对齐 div 后,JQuery 全屏背景不起作用

javascript - 将 bootstrap 主题安装到 Rails 4 应用程序中 - javascript 文件问题

html - 使用 CSS 向下移动一段文本

php - <select> 未填充,按钮与 <select> 内联

html - 拒绝加载图像 'blob:...' 因为它违反了以下内容安全策略

javascript - 基于类元素取其他元素中某个元素的内容

android - 使用 native 滚动时使滚动条在 ionic 内容中可见

javascript - 生成随机问题

html - 是否有必要在 css 和 html 中使用相同大小写的选择器名称?

html - 单击时禁用 ng-mouseover