javascript - 显示/隐藏(淡入/淡出)表格行内的多个 DIVS 以及其他行和列中的多个 A HREF

Question

好的，这就是我要找的......

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

• 从一开始所有的#info...都是隐藏的。
• 如果单击链接 1，#info-first 淡入。如果单击 链接 2 #info-first 淡出并且 #info-second 淡入等等所有 Link。
• 还有一个用于所有#info-... 的隐藏选项，因此它可以返回到开始时的状态(全部隐藏)。

Simpel 演示: JSFiddle

更新:解决方案

谢谢 Eduardo(他评论了最终解决方案):参见 JSFiddle .

HTML:

<div id="banner-content-wrap">
<div class="banner-text"><span>Cool</span> slogan goes here. <span>Cool</span> indeed.
    <br/>
    <div id="explain">From beginning all #info... is hidden. If Link 1 is clicked #info-first fades in. If then Link 2 is clicked #info-first
        <br/>fades away and #info-second fades in and so on. Also there is a hide option for all the #info-...</div>
    <div class="banner-links">
        <table border="1">
            <tr class="first">
                <td class="first">about</td>
                <td class="second">about</td>
                <td class="third">about</td>
            </tr>
            <tr class="second">
                <td class="first"><a href="#">LINK 1</a>

                </td>
                <td class="second"><a href="#">LINK 2</a>

                </td>
                <td class="third"><a href="#">LINK 3</a>

                </td>
            </tr>
            <tr class="third">
                <td colspan="3">
                    <div id="info">
                        <div class="info-first">Link 1 fades in #info-first info
                            <br/>
                            <br/><a href="#">HIDE #info-first</a>

                        </div>
                        <div class="info-second">Link 2 fades in #info-second text
                            <br/>
                            <br/><a href="#">HIDE #info-second</a>

                        </div>
                        <div class="info-third">Link 3 fades in #info-third text
                            <br/>
                            <br/><a href="#">HIDE #info-third</a>

                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
</div>

CSS:

#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;
}

Answer 1

使用 fadeToggle() 就可以了 还使用 css 隐藏带有 info-(something)

的元素

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

根据点击 .second 的 td，我们将为 divs 创建选择器，然后我们调用 fadeToggle() 根据当前可见性隐藏或显示它们。

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

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

查看此 fiddle