Динамически показать/скрыть divs с jQuery

Question

У меня в настоящее время jquery Цикл работает на странице, но не только нахожу его громоздким, но он возится с остальной частью моей страницы. Я пишу простой скрипт, чтобы сделать его устаревшим для моих целей, который займет 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/

В принципе, я сделал идентификаторы ваших дивов соответствуют вашей 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

Вы не имеете никакой связи внутри .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); 
     }); 
    }); 

Answer 3

здесь вы идете: http://jsfiddle.net/THuST/6/