使用 jQuery 动态显示/隐藏 div

Question

我目前在页面上运行 jquery Cycle，但不仅发现它体积庞大，而且还弄乱了我页面的其余部分。我正在编写一个简单的脚本，使其不再适合我的用途，它将获取单击的菜单项的 href，显示与其相关的 div，同时隐藏所有其他项。

jsFiddle：http://jsfiddle.net/THuST/

HTML（忽略我仅将<ul> 用于一个<li> 元素的事实 - 那里还有更多内容，但为简单起见，我省略了它们）

<div id="adSlideshow">
    <div class="adSlideBox current" id="red">
        <ul class="gallery" id="redGallery">
            <li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="yellow">
        <ul class="gallery" id="yellowGallery">
            <li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="blue">
        <ul class="gallery" id="blueGallery">
            <li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
        </ul>
    </div>
</div>
<ul id="menu" style="list-style:none">
    <li><a href="#asics">RED</a></li>
    <span>\</span>
    <li><a href="#plants">YELLOW</a></li>
    <span>\</span>
    <li><a href="#tooheys">BLUE</a></li>
</ul>

CSS

.adSlideBox {display:none;}
.adSlideBox.current {display:block;}

img {max-width:350px; max-height:350px}

#menu li {float:left; margin-left:2em}

jQuery

$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(".adslidebox a[href=" + link + "]");
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });

这是我第一次尝试从头开始编写脚本，所以请多多包涵。我认为我相对接近； .current div 成功淡出，但所选 div 不淡入，.current 类未切换。

Answer 1

只需对您的 html 和 javascript 稍作改动即可解决问题。

http://jsfiddle.net/THuST/3/

基本上，我使您的 div 的 ID 与您的 href 值相匹配。这样，您只需从链接中提取 href 值并将其作为有效选择器传递给 jQuery。

JavaScript

$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(link);
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });

HTML

           <div id="adSlideshow"><!-- DIV FOR THE AD BLOCK -->

                <div class="adSlideBox current" id="asics">
                    <ul class="gallery" id="redGallery">
                         <li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
                    </ul>
                </div>
                <div class="adSlideBox" id="plants">
                            <ul class="gallery" id="yellowGallery">
                                <li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
                            </ul>

                </div>
                <div class="adSlideBox" id="tooheys">

                            <ul class="gallery" id="blueGallery">
                                <li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>

                            </ul>


                </div>
            </div>


<ul id="menu" style="list-style:none">

    <li><a href="#asics">RED</a></li>
    <span>\</span>
    <li><a href="#plants">YELLOW</a></li>
    <span>\</span>
    <li><a href="#tooheys">BLUE</a></li>
</ul>

Answer 2

给你：http://jsfiddle.net/THuST/6/

Answer 3

.adslidebox 内没有链接，它位于#menu 元素下

更新： HTML：

<div id="adSlideshow">
    <div class="adSlideBox current" id="asics">
        <ul class="gallery" id="redGallery">
            <li><img src="http://i.imgur.com/LMHtk.png" alt="Asics Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="plants">
        <ul class="gallery" id="yellowGallery">
            <li><img src="http://i.imgur.com/X25M3.png" alt="Plants Plus Folio Slide 1" title=""/></li>
        </ul>
    </div>
    <div class="adSlideBox" id="tooheys">
        <ul class="gallery" id="blueGallery">
            <li><img src="http://i.imgur.com/WyDQI.png" alt="" title=""/></li>
        </ul>
    </div>
</div>
<ul id="menu" style="list-style:none">
    <li><a href="#asics">RED</a> <span>\</span></li>
    <li><a href="#plants">YELLOW</a> <span>\</span></li>
    <li><a href="#tooheys">BLUE</a></li>
</ul>

JS：

$("#menu a").click(function() {
        var link = $(this).attr('href');
        var showIt = $(".adSlideBox" + link);
        var hideIt = $(".adSlideBox.current");

        hideIt.fadeOut(100, function(){
            hideIt.removeClass("current");
            showIt.addClass("current");
            showIt.fadeIn(100);
        });
    });