Web開発まとめjQuery-UIでタブメニューを作成する手順まとめタブメニューはオシャレで機能的なUIを作るのに便利ですよね。自力で作成するのは現実的ではないのでjQuery-UIを使うのが一番楽だと思います。必要なCSS・JSの読み込みタブメニュー用HTMLの作成tabs関数でタブメニュー作成タブメニューの見本ここまでのまとめタブメニューの作る手順jQuery-UIでタブメニューを作るのはすごく簡単です。必要なのは次の手順だけ必要なCSS・JSの読み込みタブメニュー用HTMLの作成tabs関数でタブメニュー作成ということでこの3つについてコード例を一緒にやり方を説明していきます。必要なCSS・JSの読み込みまず最初にやらなきゃいけないのはjQuery本体とjQuery-UIのCSSとかJSファイルの読み込みつまり次の3つのファイルが必要ということjquery.min.jsjquery-ui.min.jsjquery-ui.min.cssこの3つだけは最低限必要なので読み込んでおきましょう。href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">バージョンについてはなるべく最新のものを使った方が良いです。タブメニュー用HTMLの作成では次にタブメニュー用のHTMLを作成していきましょう。タブメニュを作る際に必要なHTML構成は次の通りタブ全体(div要素)タブメニュー(ul要素)タブコンテンツ1(div要素)タブコンテンツ2(div要素)以下略・・・まずタブ全体をdiv要素で囲んで、コンテンツを切り替えするタブをul要素内にli要素として作ります。それぞれのタブがクリックされたときに開くコンテンツをその下にdiv要素で複数作成このような構造にする必要があります。IDを振ってください。上のコードのようにul要素の中の1つ1つのli要素で囲まれたリンクがタブになります。そのリンク先にはリンクがクリックされたときに開きたいdiv要素のIDを指定してください。ul要素内のリンクのhref属性にそのIDを指定することでタブとコンテンツが結び付けられます。tabs関数でタブメニュー作成では最後にjQuery-UIのtab関数でタブメニューを作成しましょう。これは文字通り指定した要素をタブメニューに変換する関数です。いうIDを持つdiv要素に対してタブメニュー化しています。以上でタブメニューの完成です。実際にどのようなタブメニューになるかは次のCodePenを見てください。CodePen.タブをクリックするとそれに結びつけられたdiv要素の内容が表示されます。基本的には難しくないですがタブメニュー用HTMLは構造を間違えると上手くタブ化できません。タブ用のリンクと表示するdiv要素が結び付けられているかも間違えないように注意です。以上jQuery-UIで簡単にできるタブメニューの作成方法をまとめました。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信していく予定。PHP、JavaScript(jQuery)、CSSがメイン。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですCommentName*Email*Website上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。未分類JavaScriptjQueryPHPCSSWordPressこんなアプリも作ってます。3Dドット絵メーカー(オープンベータ版)3Dドット絵(ボクセルアート)を作れるアプリ。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。2020.02.26Androidで簡単にシェア(共有)機能実装。