アプリ版：「スタンプのみでお礼する」機能のリリースについて

おしえて

javascript の処理について

締切済

  • 質問者：kokoiti0301
  • 質問日時：
  • 回答数：2件

javascript でタブ切り替えするようなサイトを作成しています。サンプルがあったので改造したいのですが、元の処理の意味がわからない箇所があるので教えてほしいです。

タブの切り替え箇所について、なぜこのような処理になっているかわかる方がいらっしゃいましたら教えていただきたいです。
わからない箇所
-------------------------------
$('#cate2btn').click(function(){
$(this).removeClass('tbl3').removeClass('tbl4').addClass('tbl1');
$('#cate1btn').removeClass('tbl1').removeClass('tbl4');
$('#cate3btn').removeClass('tbl1').removeClass('tbl3').addClass('tbl4').removeClass('tbl2');
$('#cate4btn').removeClass('tbl1').addClass('tbl2');
-------------------------------


ソース
-------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="js/jquery.biggerlink.js"></script>
<script type="text/javascript">
$(function(){
$('.tablist li').biggerlink();
});
</script>
<script type="text/javascript">
$(function(){
$('#cate2btn').click(function(){
$(this).removeClass('tbl3').removeClass('tbl4').addClass('tbl1');
$('#cate1btn').removeClass('tbl1').removeClass('tbl4');
$('#cate3btn').removeClass('tbl1').removeClass('tbl3').addClass('tbl4').removeClass('tbl2');
$('#cate4btn').removeClass('tbl1').addClass('tbl2');
$('#cate2').fadeIn('fast');
$('#cate1').fadeOut('fast');
$('#cate3').fadeOut('fast');
$('#cate4').fadeOut('fast');
});

$('#cate3btn').click(function(){
$(this).removeClass('tbl3').removeClass('tbl4').addClass('tbl1');
$('#cate1btn').removeClass('tbl1').addClass('tbl4');
$('#cate2btn').removeClass('tbl1').removeClass('tbl4').removeClass('tbl3').addClass('tbl2');
$('#cate4btn').removeClass('tbl1').removeClass('tbl2');
$('#cate3').fadeIn('fast');
$('#cate1').fadeOut('fast');
$('#cate2').fadeOut('fast');
$('#cate4').fadeOut('fast');
});

$('#cate4btn').click(function(){
$(this).addClass('tbl1');
$('#cate1btn').removeClass('tbl1').addClass('tbl4');
$('#cate2btn').removeClass('tbl1').removeClass('tbl2').removeClass('tbl4').addClass('tbl3');
$('#cate3btn').removeClass('tbl1').removeClass('tbl3').removeClass('tbl4').addClass('tbl2');
$('#cate4').fadeIn('fast');
$('#cate1').fadeOut('fast');
$('#cate2').fadeOut('fast');
$('#cate3').fadeOut('fast');
});

$('#cate1btn').click(function(){
$(this).removeClass('tbl4').addClass('tbl1');
$('#cate2btn').removeClass('tbl1').removeClass('tbl3').removeClass('tbl2').addClass('tbl4');
$('#cate3btn').removeClass('tbl1').removeClass('tbl4').removeClass('tbl2').addClass('tbl3');
$('#cate4btn').removeClass('tbl1').addClass('tbl2');
$('#cate1').fadeIn('fast');
$('#cate2').fadeOut('fast');
$('#cate3').fadeOut('fast');
$('#cate4').fadeOut('fast');
});
});
</script>
</head>

<body id="top">

<!-- タブここから -->
<div id="tab">
<div class="tabbox">
<ul class="clearfix">
<li id="cate1btn" class="tbl1"><div><span>AAA</span></div></li>
<li id="cate2btn" class="tbl2"><div><span>bbb</span></div></li>
<li id="cate3btn" class="tbl3"><div><span>ccc</span></div></li>
<li id="cate4btn" class="tbl4"><div><span>ddd</span></div></li>
</ul></span>
</div>
</div>
<!-- /タブここまで -->

<!-- リストここから -->
<div id="cate1" class="tablist">
<ul>
</ul>
</div>
<!-- /リストここまで -->

<!-- リストここから -->
<div id="cate2" class="tablist">
<ul>
</ul>
</div>
<!-- /リストここまで -->


<!-- リストここから -->
<div id="cate2" class="tablist">
<ul>
</ul>
</div>
<!-- /リストここまで -->



<!-- フッタここから -->
<footer>
<div id="footer">

</div>
</footer>
<!-- /フッタここまで -->

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： yambejp
  • 回答日時：

なんか非効率なので例えばこんな感じ



<style>
.tabbox li.active{background-Color:aqua;}
</style>
<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('.tabbox li').on('click',function(){
$('.tabbox li').removeClass('active');
$(this).addClass('active');
var idx=$('.tabbox li').index(this);
$('.tablist').hide().eq(idx).fadeIn();
}).eq(0).trigger('click');
});
</script>
<body>
<div class="tabbox">
<ul>
<li><div>aaa</div></li>
<li><div>bbb</div></li>
<li><div>ccc</div></li>
<li><div>ddd</div></li>
</ul>
</div>
<div class="tablist">
AAA
</div>
<div class="tablist">
BBB
</div>
<div class="tablist">
CCC
</div>
<div class="tablist">
DDD
</div>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： lv4u
  • 回答日時：

javascriptのコーディングは、生のjavascriptを使う方法もありますが、もっと効率的なコーディングができるように、jQueryやBootstrapとか、それ以外のframeworkを利用することも多いのです。


だから、いくらjavascriptだけを勉強しても、コードは理解できません。
質問にあるコードは、jQueryを使っていますので、jQueryの本を読むことをお勧めします。
その本を読めば、質問のコードの動作が理解できるようになると思いますよ。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報