Question

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

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

.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);
        });
    });

Answer 2

只需对您的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 3

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

使用jQuery动态显示/隐藏div

3 个答案: