Question

我如何获得＆＃34; pastButton＆＃34;只显示＆＃34; pastInvestments＆＃34;和＆＃34; currentButton＆＃34;只显示＆＃34; currentInvestments＆＃34;什么时候点击？

在我的html中，我有2个按钮和2个div：

<button class="w3-button currentButton">Current</button>
<button class="w3-button pastButton">Past</button>

<div class="currentInvestments">
   //images inside div
</div>

<div class="pastInvestments">
   //images inside div
</div>

我想要＆＃34; pastInvestments＆＃34;在页面加载时默认隐藏，以及＆＃34; pastButton＆＃34;仅点击＆＃34; pastInvestments＆＃34;图像显示。现在＆＃34; currentButton＆＃34;是完美的工作，但＆＃34; pastButton＆＃34;同时隐藏＆＃34; pastInvestments＆＃34;和＆＃34; currentInvestments＆＃34;点击时。

以下是我使用的jQuery：

$(function() {
    $('.pastInvestments').hide();

    $('.currentButton').click(function(){  
      $('.currentInvestments').show();
      $('.pastInvestments').hide();
    });

    $('.pastButton').click(function(){  
      $('.currentInvestments').hide();      
      $('.pastInvestments').show();
    });
});

Answer 1

如果您希望在页面加载时隐藏它，请隐藏CSS中的.pastInvestments：

.pastInvestments {
display:none;
}

这样它加载隐藏而不是在页面加载后隐藏它。

对我来说，它的工作正常。

jQuery - .show不能在.hide之后工作

1 个答案: