23:00JavaScriptjQueryタブTweetこのサイトを初めてから3連続でjQueryの記事になってしまいました。他の記事も書かなきゃと思っているのですが、記事の為の記事なんて書きたくないと思い、結果今はまっているjQueryの記事になってしまってます。そんな今回はタブ切替コンテンツです。まー、よくあるものですが自分にとってはいつも通り大変でした。一応これでも、動けばいいって感じではなく美しいをコードを目指して端正込めて作ってます。Demo必要なファイルjquery.jsコーディング&設定HTMLHTMLヘッダー内でjquery.jsを読み込む。type="text/javascript"></script>以下の様にul#tabchange内のliとdiv#tabchangeContents内のdiv.tabchangeBoxは同じ数だけ用意する。次にdiv.tabchangeBox内にコンテンツを記述する。タブとコンテンツの関係は記述順になっている。#box1~#box5はJavaScriptが動作しない環境の場合に、ページ内リンクとして設定している。よってスクリプトとは関係はない。--></div></div>CSS以下サンプルの記述ですが、結構自由にスタイルは変更出来ます。タブを画像にする場合、ホバー時や表示コンテンツに対応するタブの画像切替には対応していません。#fff;}JavaScript以下のスクリプトを記述。スムーズスクロールとの併用が出来ないとの指摘がありましたので、上記スクリプト11~12行目を追加しました。あとがき今回のスクリプトで苦労した点は、フィルタの中に変数を入れるところですかね。効かないのかと思っていたのですが、フィルタって文字列の中にあるので、フィルタを途中分割して文字列と文字列の間に変数を入れることで解決しました。":eq("+Index+")"って感じで。jQuery独自のものなのでメソッド的なイメージがあり、なかなか気づかなかったです。普通に考えるとCSSでいうセレクタですもんね。jQueryに関しては最近始めたばかりですので、次々と新発見がありホント楽しいです。あと何回jQueryの記事が続くんだろうって位に。まーjQuery意外にも興味はイロイロありますのでそのうち他のカテゴリーの記事も書きますのでヨロシクです。09:09はじめまして。このサイトを参考にHPを作成しています。許可が要るという事でしたら、無許可で当サイトの情報を使用した事は申し訳ありません。親切に事細かく記載しているのでとても参考になり、当サイトを拝見しています。【タブ切替コンテンツを実現するjQueryのスクリプト】を参考にHPを作ってみたのですが、うまく動かないです。確認画面ではjavaが動いているのですが、サーバーにUPするとjavaが動いていないみたいです。a.activeBoxのボーダーやメニューのタブ画像が指定リンクになっても変わらない。基本的にこのサイト内に掲載している内容はご自由にご使用になさって問題ございません。役に立てた思えて嬉しい限りです。スクリプトが動かないとのことですが、情報が少なくて判断が難しいので取り敢えず以下を確認させてください。ローカルではJavaScriptが動作するが、サーバーにアップすると初期表示はされるがJavaScriptは動作しない。いうことで宜しいでしょうか?であれば以下をご確認下さい。ブラウザのJavaScriptはオンになっているか。必要なファイルは全てサーバーにアップされているか。JavaScriptのパスは間違っていなか。文字コードの違いで文字化けして読み込まれていなか。上記でも動作しないのであれば、以下の情報を提供頂ければもう少し判断できるかと思います。・それぞれのファイルのディレクトリ宜しくお願いします。10:30syujiさん返信ありがとうございます。ご進言して頂いた上記確認事項については、パスをしていると思われます。ウェブサイト欄URLよりDLでデーターがあります。確認をして頂ければ幸いです。さんデータをご用意頂いたので確認がしやすかったです。原因はJavaScriptのパスが間違っています。js/jquery.jsjs/tab.jsのパスになっていますが、ディレクト構造ではjsフォルダではなくルールにありました。上記を修正すると動作するようになると思いますが、他にもHTMLやCSSの記述間違い等あります。技術的な問題というよりもケアレスミスが多いですので、そのあたりをきちんと確認した方が宜しいかと思います。