Question

我有标签，我有一些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;
}

Answer 1

尝试 jquery标签，或者如果你只想在css中使用这个。

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

Answer 2

你可以使用jqueryui tab：它易于使用且很好。

Answer 3

查看以下JSFIDDLE：

$('ul.group > li > a').click(function(event){
    $('div.box').each(function(){$(this).css('display', 'none');});
    $('div'+$(this).attr('href')).css('display', 'block');
});
$('ul.group > li > a[href=#box1]').click();

Answer 4

您可以使用jquery。下面是使用jquery的工作代码。

<!DOCTYPE html>
<html>
<head>
<style type="text/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 {

    display: block;
    height:auto;
background-color:red;
}
#box2:target {

    display: block;
    height:auto;
background-color:red;
}
#box3:target {

    display: block;
    height:auto;
background-color:red;
}
#box4:target {

    display: block;
    height:auto;
background-color:red;
}
#box5:target {

    display: block;
    height:auto;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery-2.0.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").each(function()
{
$(this).css("display","none");
});

});
function Show(boxName)
{
$('.box').css("display","none");
$('#'+boxName).css("display","block");
}
</script>
</head>
<body>
<div id="ie-test">

                <ul class="group" id="boxLinks">
                    <li><a href="javascript:Show('box1')">Description</a></li>
                    <li><a href="javascript:Show('box2');">Audience</a></li>
                    <li><a href="javascript:Show('box3');">Objectives</a></li>
                    <li><a href="javascript:Show('box4');">Prerequisites</a></li>
                    <li><a href="javascript:Show('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>

如何获取div onclick选项卡的内容

4 个答案: