jQueryでタブメニューをクリックしてコンテンツを切り替える方法【プラグイン不要】
カテゴリ:コーディング
この記事は約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と一致したものを表示する形になります。
もっと良い書き方があるかも。。
一旦、メモメモ
合わせて読みたい「コーディング」の記事
この記事を書いた人
Growing Scale
コーディング歴約15年。WordPress化したサイトは約100サイト。SEOキーワードで上位表示経験多数。最近はGoogleのデーターポータルがおもしろい。ウェブ解析士。サイト制作実績
「Web制作」の関連記事
アドセンスのクリック単価が低い原因
AdSense(アドセンス)
アドセンスのクリック単価が低い原因は様々な原因が考えられます。 よくいわれるのは、 ページの内容が、クリ...
Google Analyticsで自分を除外する方法
SEO対策
Google Analyticsを使いアクセス解析をスタートすると、自分がアクセスした数を除外したくなります。そこで、...
wordpressの新規投稿 ができなかったけど解決!した話
WordPress
もっと言うと、投稿記事の更新もできない。記事に文書追加して更新ボタンをクリック。その後再読込すると追加した分が消えてま...
contact form 7のメール送信できない解消法
WordPress
contact form 7は、便利な分他のメール送信プラグインと比べエラーが多い印象がしますね。 しかし、メールの設...