私はトグルを持っています、そして現在それはこのように働きます:
クリックすると、に.member-button
追加および削除されます。非表示でも表示されます.active-sub
.member-button
.trainer-button
#member
#trainer
.trainer-button
から削除するときに追加するのと同じように機能し、.active-sub
非表示にすると表示されます。.trainer-button
.member-button
#trainer
#member
私が問題を抱えているのは、ページが最初に読み込まれるときに、追加されているかどうかを確認し、.active-sub
追加されて.member-button
いる場合は削除するにはどうすればよい.trainer-button
ですか?(およびその逆)
自動的に非表示にするように#member
設定されていないかどうかも確認したい$("#member").hide();
#trainer
Javascript:
<script type="text/javascript">
$(document).ready(function(){
//$("#member").hide();
$("#fitness-trainer").hide();
$('.member-button').addClass("active-sub");
$('.member-button').click(function () {
$("#fitness-trainer").fadeOut(function () {
$("#member").fadeIn();
});
$(".trainer-button").removeClass("active-sub");
$(this).addClass("active-sub");
});
$('.trainer-button').click(function () {
$("#member").fadeOut(function () {
$("#fitness-trainer").fadeIn();
});
$(".member-button").removeClass("active-sub");
$(this).addClass("active-sub");
});
});
</script>
HTML:ボタン
<a href="#" class="member-button">Member</a>
<a href="#" class="trainer-button">Trainer</a>
HTML:コンテンツ
<div id="member">
member content
</div>
<div id="trainer">
trainer content
</div>