jQuery顯示和隱藏div

我有一個頁面什麼將有幾個按鈕，並點擊一個按鈕我基本上需要它切換div - 我把它們包裝在父div與id然後每個將被替換的div也將獲得它自己的id。我得到了這個代碼來交換工作，但如果我們結束了30個左右的配對，那麼這將是單調乏味的，並不是完美的代碼。jQuery顯示和隱藏div

那麼如何清理一下這樣的點擊，活動div設置爲display: none，並且點擊一次設置爲display: block？

這是我現在工作的jQuery代碼。爲此，我想要顯示macaroni，並要求farfalle隱藏。

$('#macaroniButton').click(function(){ 
    $('#macaroni').toggle(); 
    $('#farfalle').toggle(); 
});

<div id="topchanger"> 
    <div id="farfalle"> 
     ..... 
    </div> 
    <div id="macaroni"> 
     ..... 
    </div> 
</div>

<div class="circlerow"> 

    <div class="circlepasta" id="macaroniButton"> 
     ...... 
    </div> 

    <div class="circlepasta" id="AnotherButton"> 
     ...... 
    </div> 
    </div> 
</div>

來源

2014-07-17 jacob

分享您的標記！ – AdityaParab

您可以將'＃macaroniButton'元素的HTML添加到問題中嗎？ –

@RoryMcCrossan我只是補充說，抱歉。 – jacob

你可以給一個類來要show/hide和處理點擊之前的所有div，隱藏與該類別的所有股利。比方說，你給它一個類「項目」：

<div id="topchanger"> 
    <div id="farfalle" class="item"> 
     ..... 
    </div> 
    <div id="macaroni" class="item"> 
     ..... 
    </div> 
</div>

和你的JavaScript將是：

$('div.item').click(function(){ 
    $('div.item').hide(); 
    $(this).show(); 
});

注意$(this)是指剛點擊的項目。

希望得到的結果

來源

2014-07-17 15:11:44 Edward

您可以從此開始。相應地擴展我的答案。

 $('#macaroniButton').click(function(){ 

      $("#macaroni").show().siblings('div').hide(); 

    });

來源

2014-07-17 15:12:10 John

jQuery顯示和隱藏div

回答

相關問題