コーディング

jQueryでタブメニューをクリックしてコンテンツを切り替える方法【プラグイン不要】

投稿日：2016/11/18 更新日：2022-12-12

本ページはプロモーションが含まれています

この記事は約1分8秒で読めます。

こんにちは！グローイングスケールの竹林と申します。

Web業界15年以上でWordPress（100サイト以上構築）とSEOが得意なWebデザイナーです。
noteで「爆速！速くGoogleにインデックスしてもらう方法」を書いたので、ご興味ありましたらご覧ください。
「好き」なことを仕事にしたいという方のお役に立てればと思います。

もっと複雑に言うと

「クリックしたらソース上で離れているコンテンツを表示・非表示したい」

下記がそのソースです。

<?php 
 $terms = get_the_terms($post->ID,'task'); 
 foreach( $terms as $term ) {
 $cat = get_the_category();
 $cat = $cat[0];
 echo '<li class="'.$term->slug.'"><a href="'. home_url() .'/task/'. $term->slug .'">'.$term->name.'</a></li>';
 }
?>
 $('#nav-footerlmenu-01 a').on('click', function() {   clicklink = $(this).attr("id");  selector_pass = ".lyt-topmainr-05 #" + clicklink; $(".lyt-topmainr-05-inner").css("display","none");  $(selector_pass).css("display","block");  return false;  });

少し解説すると。

クリックしたaタグのIDセレクタを「clicklink」の変数に入れます
更に「clicklink」のセレクタと任意classを合体させたのを「selector_pass」の変数に入れます
display:none;で一旦コンテンツを非表示にします
「selector_pass」の変数に入ってるセレクタをdisplay:block;します

要するに、クリックしたIDを拾って、コンテンツに書かれてあるIDと一致したものを表示する形になります。

もっと良い書き方があるかも。。

一旦、メモメモ

副業で成功するためには？
プログラミングに専念して収入増やす方法は？

この記事を読んでいる多くの方は、プログラマーとして働いているか、プログラミングを学んでいる方かもしれません。現在の職場や収入に不満があり、副業でプログラミングを活かして収入を増やしたいと考えている方もいるでしょう。しかし、副業を始めても、以下のような悩みに直面していませんか？

「クラウドソーシングで案件を探しても、競争が激しく、仕事を獲得できない…」
「自分で営業しても、なかなかうまくいかない…」
「単発の仕事が多く、安定した収入を得られない…」
「営業や事務作業に時間を取られ、本業に集中できない…」

副業やフリーランスとして働く場合、営業や事務作業なども自分でこなす必要があり、時間と労力がかかります。そんな時に、「仕事を紹介してくれたり、サポートしてくれる人」がいたらどうでしょうか。