此代码在第一次单击时正常工作。当重复它的工作只在第二次点击相同的元素。 的 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;
});
};
答案 0 :(得分:0)
使用jQuery dom ready处理程序注册单击处理程序,而不是使用内联单击处理程序来注册jQuery单击处理程序
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>