Javascript 在表行中显示/隐藏（淡入/淡出）几个div，在其他行和列中显示几个A HREF

好的，这就是我要找的

我在一行的3列中有3个链接a href。下面是一行中的1列，其中包含3个div。 如果单击链接，如何使div淡入/淡出，如下所述

从一开始，所有的信息都是隐藏的。 如果点击链接1，信息首先淡入。如果先单击链接2，请单击“信息” 淡出和信息秒淡入等所有链接的。 还有一个隐藏选项，用于所有的信息-…，所以它会返回到它在开始时的所有隐藏。 Simpel演示：

更新：解决方案 谢谢爱德华多，他评论了最后的解决方案：见

HTML:

使用fadeToggle就可以了 还可以使用css隐藏包含信息的元素

根据单击的td。其次，我们将为div创建选择器，然后调用fadeToggle以隐藏它们或根据它们当前的可见性显示它们

div[class^='info-']{
    display:none;
 }

要隐藏div，请选择以info开头的类的任何div-

---

请参见此

您可能只能够对使用css。@user3334690除了：checked、：hover等，css还没有单击选择器，我很好奇如何使用纯css实现这一点？@TilwinJoy如果您使用更改锚定标记以指定元素为目标，您可以使用css选择器获取当前目标，并将其从隐藏的元素中排除？但是我认为目标选择器在JSFIDLE中不起作用。。。现在回想起来，我不确定它是否能满足OP的要求。。。但我认为这是有可能的…@TilwinJoy我在谷歌上搜索发现了它，这是一款非常精巧的手风琴，只通过：target选择器使用css。非常好！尽管如此，当点击一个链接时，当前显示的链接会消失吗？我只想一次看到其中一个。干杯很好，谢谢！我并不想挑三拣四，但当点击另一个链接时，上一个链接似乎也会在短时间内可见。有没有可能让第一个消失，然后在新的消失之后呢？这将等待toggleFade完成，然后它将隐藏其他元素。我很抱歉，哈哈。英语不是我的母语。我没有解释我的意思。很抱歉我的意思是相反的。先淡出，然后淡入另一个。Lol np只需像这样交换选择器

#banner-content-wrap {
    position: absolute;
    top: 25%;
    width: 960px;
    right: 50%;
    margin-right: -480px;
}
#explain {
    text-align: center;
    font-size: 12px;
    color: #000;
}
.banner-text {
    text-align: center;
    position: absolute;
    height: 80px;
    width: 950px;
    overflow: hidden;
    padding: 0;
    overflow: visible;
    font-size: 36px;
    font-family:'Berlin Sans FB';
    color: #fff;
    text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
}
.banner-text span {
    color: #000;
}
.banner-links table {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
    border-collapse:collapse;
}
.banner-links tr.first td.first {
    text-align: center;
    padding-right: 50px;
}
.banner-links tr.first td.second {
    text-align: center;
}
.banner-links tr.first td.third {
    text-align: center;
    padding-left: 50px;
}
.banner-links tr.first {
    font-size: 10px;
    font-family:'Verdana';
    color: #000;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
    opacity: 0.75;
    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
}
.banner-links tr.second td.first {
    text-align: center;
    padding-right: 50px;
}
.banner-links tr.second td.second {
    text-align: center;
}
.banner-links tr.second td.third {
    text-align: center;
    padding-left: 50px;
}
.banner-links tr.second {
line-height: 24px;
}
.banner-links tr.second a {
    text-transform: uppercase;
    font-size: 18px;
    font-family:'Verdana';
    color: #000;
    text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
    opacity: 0.75;
    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
}
.banner-links tr.second a:hover {
    opacity: 0.95;
}
.banner-links tr.second td.first a:hover {
    color: #ff0000;
}
.banner-links tr.second td.second a:hover {
color: #34b700;
}
.banner-links tr.second td.third a:hover {
    color: #004eb7;
}
.banner-links tr.third td {
    background: transparent;
    width: 100%;
}
.banner-links #info {
    font-size: 12px;
    font-family:'Verdana';
    text-align: left;
    background: rgba(255, 255, 255, 0.33);
}
.banner-links .info-first {
    background: #ff0000;
    padding: 10px 10px 10px 10px;
}
.banner-links .info-second {
    background: #34b700;
    padding: 10px 10px 10px 10px;
}
.banner-links .info-third {
    background: #004eb7;
    padding: 10px 10px 10px 10px;
}

$(".second td").click(function(){
   $(".info-"+$(this).attr("class")).fadeToggle()
});

div[class^='info-']{
    display:none;
 }