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
- 回答日時:
なんか非効率なので例えばこんな感じ
<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>
No.1
- 回答日時:
javascriptのコーディングは、生のjavascriptを使う方法もありますが、もっと効率的なコーディングができるように、jQueryやBootstrapとか、それ以外のframeworkを利用することも多いのです。
だから、いくらjavascriptだけを勉強しても、コードは理解できません。
質問にあるコードは、jQueryを使っていますので、jQueryの本を読むことをお勧めします。
その本を読めば、質問のコードの動作が理解できるようになると思いますよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
【javascript で動的に a タグ...
-
クリックで表示、非表示するメ...
-
チェックボックスに入っている...
-
ホームページビルダー15 メニュ...
-
jquery ドロップダウンメニュー...
-
javascriptでEnterキーをtabキ...
-
jQueryのeqで最後からn番目以降...
-
JS <a></a>タグ内のリンク先ア...
-
多階層ドロップダウンのスマホ...
-
ネストされたチェックボックス...
-
JQueryタブのアクティブ アン...
-
MAX関数を使ってからLEFT JOIN...
-
【HTML、VBScript】HTAでのイベ...
-
1枚の画像をクリックして複数の...
-
error LNK2019 未解決のシンボ...
-
タブで開いてさらにタブ内をア...
-
jspでcssが読み込めない
-
javascriptでオブジェクトの重...
-
オンマウス時に別画像を上に重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
JQueryタブのアクティブ アン...
-
javascriptでEnterキーをtabキ...
-
「jQuery」アコーディオンメニ...
-
【jQuery】遅延実行(タイムラ...
-
ネストされたチェックボックス...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
文字と数字が混在する要素のsor...
-
Jquery の slide.toggle で要素...
-
【jQuery】hoverしたn秒後にイ...
-
チェックボックスに入っている...
-
クリックで表示、非表示するメ...
-
同一ページ内で、任意の文字列...
-
オンマウスで画像ロールオーバ...
-
javascriptで、クリックしたら...
-
PHPでログインフォーム
-
<li>タグの順番を入れ替える方法
-
jQuery タブメニューへのダイ...
おすすめ情報