動態顯示/隱藏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

回答

相關問題