动态显示/隐藏div与jQuery

我目前有jquery Cycle在页面上运行，但不仅发现它笨重，但它与我的其余页面搞乱。我正在编写一个简单的脚本，使其对于我的目的而言已经过时，它将采用单击菜单项的href，显示与之相关的div，同时隐藏所有其他脚本。动态显示/隐藏div与jQuery

的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类不会切换。

来源

2012-01-10 Jascination

只是轻微改变你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>

来源

2012-01-10 01:36:22

难道你不知道，当我编辑的代码来适应的jsfiddle我忘了改在href =“＃xyz”的菜单项为红色/黄色/蓝色。可能使它变得更加困难！干杯，我的var showIt代码解决了这个问题。 – Jascination 2012-01-10 01:41:22

太棒了，很高兴我能帮上忙！ – 2012-01-10 01:44:35

你里面有没有.adslidebox链接，这是#menu元素

UPDATE： 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); 
     }); 
    });

来源

2012-01-10 01:32:27

在这里你去：http://jsfiddle.net/THuST/6/

来源

2012-01-10 01:39:09 redmoon7777

动态显示/隐藏div与jQuery

回答

相关问题