單擊操作可以在第二次點擊時起作用

Question

此代碼在第一次點擊時正常工作。當重複它的作品時，只需在第二次點擊相同的元素。 HTML

<div id="monthly-table"> 
<a href="#" class="monthly active">Monthly</a> 
<a href="#" onclick="subscriptionTable(this)" class="yearly">Yearly</a> 
<h1>Monthly</h1></div><div id="yearly-table" style="display:none"> 
<a href="#" onclick="subscriptionTable(this)" class="monthly">Monthly</a> 
<a href="#" class="yearly active">Yearly</a> 
<h1>Yearly</h1></div> 

SCRIPT

function subscriptionTable(el) { 
    $(el).on('click', function() { 
     if ($('#yearly-table').is(':hidden')) { 
      $('#yearly-table').show(); 
      $('#monthly-table').hide(); 
     } else { 
     $('#yearly-table').hide(); 
     $('#monthly-table').show(); 
     } 
     return false; 
    }); 
}; 

Answer 1

而不是使用在線點擊處理程序註冊jQuery的單擊處理程序，使用jQuery DOM準備處理程序來註冊單擊處理

jQuery(function($) { 
 
    $('.period').on('click', function() { 
 
    var $target = $($(this).attr('href')).show(); 
 
    $('.target').not($target).hide(); 
 
    return false; 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="monthly-table" class="target"> 
 
    <a href="#" class="monthly active">Monthly</a> 
 
    <a href="#yearly-table" class="yearly period">Yearly</a> 
 
    <h1>Monthly</h1> 
 
</div> 
 
<div id="yearly-table" class="target" style="display:none"> 
 
    <a href="#monthly-table" class="monthly period">Monthly</a> 
 
    <a href="#" class="yearly active">Yearly</a> 
 
    <h1>Yearly</h1> 
 
</div>