jQueryを使うと簡単にタブを実装することができます。しかし、ただタブを作るだけではなく、他ページから任意のタブにアクセスしたい・・・なんて事はありませんか？ 例えばタブが3つ並んでいる場合に、他ページから遷移して2番目のタブをアクティブにしたい・・・等。 今回は、jQueryを使用して特定のタブにダイレクトリンクする方法をまとめてみました。 [jQuery]別ページから特定のタブにダイレクトリンクする方法 [サンプル] ここではリンク元ページをtab.html、タブページをtab2.htmlとしています。 tab.htmlにあるhrefの「#」以下を取得して、リンクに応じたタブを表示させる方法を記述します。 デモページはこちらです。 2016/04/07[追記]：ダイレクトリンクではなく、特定のタブをアクティブにするだけが良い場合はこちらの記事をご参考までに。 [jQuery]パラメー

業務でタブ切り替え動作の作成依頼があり、先日紹介した「jQueryでの連番要素を制御する方法」を利用して タブ切り替え動作が実装できないか試したところ、意外とシンプルなSCRIPT構成で出来あがったので紹介してみます。 まずHTMLソースから。 ※タブボタンは３つのパターンにしておきます。（いくつでも増やすことは可能） ※今回のサンプルは装飾なしでタブ切り替え動作のみのパターンにします。 ◆HTML ≫<a href="javascript:void(0);" class="btn_act active">MENU【１】</a> ≫<a href="javascript:void(0);" class="btn_act">MENU【２】</a> ≫<a href="javascript:void(0);" class="btn_act">MENU【３】</a> <div id="motio

今年始めに紹介した、CSSのみでタブUIを作成する方法「CSS（CSS3）のみでタブUIを作ってみる。（Ver.1）」。 こちらの Ver.1 でも基本的なタブの動き（表示／非表示の切り替え）は実装できていましたが、タブボタンに対して、現在開いているアクティブ状態のボタンの見分けを付けることが実装できていなかったので、その部分を改善した、CSS（CSS3）のみでのタブUI実装方法 Ver.2 のご紹介。 まずは前回同様に動作サンプルから。 ※動作推奨環境はWebkitブラウザのSafariやChromeですが、CSS3アニメーション部分を除いた、タブの基本動作はFirefox等でもご確認いただけます。 CSS3 TAB【SAMPLE 01】 ≫アンカーリンクによって、うまく動作が見れない場合はこちらから（別ウィンドウで開きます） ３つのタブボタンをクリックすることで、その下にそれぞれのコン

This domain may be for sale!

タブ機能の作り方！ページ移動せずに内容を切り替えるタブ機能の作り方を解説。ページを移動することなくボックス内の表示内容を切り替える方法です。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブ表示部分がクリックされれば一瞬でページ内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。 タブを押すと一瞬で表示内容が切り替わる機能の作り方 ウェブページを移動することなく指定範囲の表示内容を切り替えられるタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。ジャンル別に記事を掲載するニュースサイトや、地域別にお知らせを掲載する情報サイトなど、多数のウェブページで見かけます。 このようなタブ機能は、ほんの少しのHTML＋CSS＋JavaScriptソースを記述するだけで簡単に作れます。そこで今回は、ウェブページ上にタブ機能を作る方