オカマニブログ(岡山マニア)
  • WEBサイト
  • ホーム
  • 岡山の事故
  • 岡山の事件
  • 岡山のコラム
  • 岡山の物件@大島てる

タブつきのテーブル(表)を作る方法

  • PC等
  • 日記
このエントリーをはてなブックマークに追加
Tweet
Pocket

HPのトップページに有る更新情報の表を、Yahoo!などのニュースサイトが使っている『タブ付き』のものに変えたくて色々と調べてみました。

参考にしたのはALl ABOUTさんのこの記事。
『ページを移動せずに内容を変更するタブを作る方法』

1今、アップしている状態ですが、左の画像のような形にしたかったのです。
タブをクリックすると、ページの移動をせずにテーブル内の内容が切り替わるという機能です。
かつて使われていたFrameのサイトにも似ていますが、ページを開いて時点で各タブの読み込みが終わっている他、ページの移動が無いので読む側にもストレスが無くて使いやすそうです。

細かいつくり方はリンク先を参照してみてください。
仕組みだけ紹介しますね。

2上記のタブ付きテーブルは実際には左の画像のような形で作られています。
タブをクリックしても再度の読み込みが行われないのは、ページを開いた時点で既にタブ内の情報を一通り読み込んでしまっているからなんですね。
これをJavaScriptの記述によって1つ以外のタブは表示しない、タブをクリックしたら表示を切り替えるという作業を行う事で、<iFrame>のような動作を読み込みを行わずに実行しているものです。

html内の記述が長ったらしくなってしまうので、全てのページで使うというのには適していないと思いますが、各indexページなどを選んで使うのには結構便利な機能だと思います。
少しのソース編集の知識があれば出来るので、興味がある方は試してみてはいかがでしょう♪

More from my site

  • 【追悼】「インターネット エクスプローラー」きょうでサポート終了【追悼】「インターネット エクスプローラー」きょうでサポート終了
  • 【考察】月○○万PVの疑惑【考察】月○○万PVの疑惑
  • Google adsenseの最適化「ブロックのコントロール」のやり方を解説するよ!Google adsenseの最適化「ブロックのコントロール」のやり方を解説するよ!
  • キーボード付きのandroidタブレットを買ったよ!キーボード付きのandroidタブレットを買ったよ!
  • DiginnosタブレットでLinuxを使ってみたよ!DiginnosタブレットでLinuxを使ってみたよ!
  • google adsenseの導入について尋ねられたのだけど…、別に急がなくてよくないか?google adsenseの導入について尋ねられたのだけど…、別に急がなくてよくないか?
こちらもお勧め  PhotoScape、使ってみた!
PC等
2013年11月1日

Post navigation

岡山県の北部と南部の境界線って、どこ? → ← Twitterの埋め込みタイムラインのサイズ変更

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

お勧め記事

2018年 おめでとうございます。

新年になりましたね。 2017年はサイトをご愛顧頂き、誠にあ […]

【玉島】炎天下の中、オリンピック商会の夫婦焼きを食べてきたよ!

暑い夏の日。 玉島を散策していると、見てはいけないものを見て […]

【超余裕】GF90☓パナライカ14-150mmは余裕で実用的だ!

旧フォーサーズの規格のレンズをまともに使おうと思ったら、E- […]

秋は夜長だ、怪談だ@岡山4

秋の夜長なので、久しぶりに怪談話をしていこうと思います。 今 […]

最近の投稿

  • 【バイクの森】新顔の猫・小鉄が来てたよ! 2022年6月29日
  • 【倉敷市】喫茶YESで大ボリュームのモーニングを食べたよ! 2022年6月28日
  • 【新作】岡山木村屋の福神漬サラダロールを食べたよ! 2022年6月27日
  • 大島てるで岡山市・泉田~青江の物件を調べてみた 2022年6月26日
  • 【急展開】謎の転覆車両に驚くべき変化が起きていた…!? 2022年6月25日

ブログをメールで購読

メールアドレスを記入して頂ければ、記事の更新をメールにてお知らせします。

572人の購読者に加わりましょう

  • 岡山の話題, 岡山市
    【岡山市】野田地下道を歩いてみたら、意外とレトロで素敵だった!

    岡山市の市街地をあてもなく散策していると、野田地下道にたどり着きました。 正式名称は野田地下道なんですね。 普段会話の中などで出てくる時は「野田の...

  • バイク, 動画, 岡山の話題, 岡山市, 日記
    【動画】国道53号グルービング箇所を走ってきたよ!

    動画投稿テスト。 SNSにちょいちょいバイクの走行動画をアップしているので、ブログにも引っ張ってこようかと思っています。 今回はテスト投稿です...

  • ニュースの感想
    【倒産】M.S.K/破産手続き開始決定 <岡山市>

    M.S.K/破産手続き開始決定 <岡山市>(https://n-seikei.jp/2021/07/post-77072.html) (有)M.S....

  • 岡山の話題, 岡山市
    閉業した稲荷山健康センターを見てきたよ!

    Googleマップで何気なく岡山市北区の稲荷山健康センターを検索した所、閉業になっていました。 2020年に新型コロナウイルスの影響で民事再生の...

  • PC等, 日記
    【テンプレート】わが社の運輸安全マネジメントの取組み(エクセル)

    知人に頼まれて【わが社の運輸安全マネジメントの取り組み】という書類を作成しました。 (※項目だけで中の本文は入っていない、空の状態です) ...

  • レトロ写真, 岡山の話題, 高梁市
    【高梁市】津川町のナカウンでオシャレな人形と、レトロ看板を見てきたよ!

    高梁市津川町の国道を走る度に気になっていた場所があります。 今回は木野山駅に行ってきたので、ついでに立ち寄ってきました。 こちらです。 ...

  • ニュースの感想
    【不起訴】88歳母親を殺害した疑い 57歳女を逮捕 岡山・津山

    88歳母親を殺害した疑い 57歳女を逮捕 岡山・津山(https://headlines.yahoo.co.jp/hl?a=20200225-0001...

  • 岡山の話題, 岡山市
    大島てるで岡山市・泉田~青江の物件を調べてみた

    日本全国の事故物件の情報を集めている「大島てる」というサイトがあります。 自由に投稿できるスタイルのために、不確かな情報や明らかに「事故物件」という...

  • 岡山の話題, 玉野市
    玉野市玉・港の風景

    玉野市玉の港の夕暮れを撮影して来ました。 三井造船の工場がすぐそばにある小さな港の辺りです。

  • PC等, 日記
    FireFoxの起動時に鍵をかける方法(マスターパスワードの設定方法)

    最近のブラウザは高性能で、それ自体に様々なデータが保存されています。 それだけに勝手に起動されては様々な情報が抜かれてしまう恐れがあるので、注意が必...

カテゴリー

タグ

PC等 お土産 お店 お菓子 イベント カメラ コンビニの食べ物 ニュース マルフク レトロ写真 レトロ看板 事件 事故 交通 倉敷市 備前市 公園 動画 各地の怪談 地名の由来 変な看板 変態 天地無用の聖地巡礼 実写!日本恐怖100名所 寺院 岡山市 新見市 日本怪奇名所案内 橋 津山市 浅口市 瀬戸内市 火事 玉野市 真庭市 矢掛町 神社 笠岡市 総社市 聖地巡礼 赤磐市 閉店 食べ物 飲食 高梁市
2022年6月
月 火 水 木 金 土 日
 12345
6789101112
13141516171819
20212223242526
27282930  
« 5月    

最近のコメント

  • 【高梁市】津川町のナカウンでオシャレな人形と、レトロ看板を見てきたよ! に Okayamania より
  • 【高梁市】津川町のナカウンでオシャレな人形と、レトロ看板を見てきたよ! に おてんばうさぎ より
  • 大島てるで美作市の物件を調べてみた に 大島てるで岡山市・泉田~青江の物件を調べてみた - オカマニブログ(岡山マニア) より

アーカイブ

何をお探しですか?

下の『 タグクラウド』のキーワードをクリックすると、それに関連した記事が選ばれます。

検索用フォームもご利用下さい。

Search

タグクラウド

PC等 (101) お土産 (58) お店 (325) お菓子 (71) イベント (43) カメラ (68) コンビニの食べ物 (24) ニュース (864) マルフク (34) レトロ写真 (161) レトロ看板 (78) 事件 (67) 事故 (178) 交通 (98) 倉敷市 (398) 備前市 (33) 公園 (52) 動画 (33) 各地の怪談 (58) 地名の由来 (28) 変な看板 (25) 変態 (26) 天地無用の聖地巡礼 (33) 実写!日本恐怖100名所 (35) 寺院 (54) 岡山市 (425) 新見市 (32) 日本怪奇名所案内 (23) 橋 (24) 津山市 (64) 浅口市 (43) 瀬戸内市 (40) 火事 (74) 玉野市 (312) 真庭市 (28) 矢掛町 (31) 神社 (125) 笠岡市 (29) 総社市 (47) 聖地巡礼 (62) 赤磐市 (39) 閉店 (87) 食べ物 (283) 飲食 (205) 高梁市 (74)

カテゴリー

2022年6月
月 火 水 木 金 土 日
 12345
6789101112
13141516171819
20212223242526
27282930  
« 5月    

最近の投稿

  • 【バイクの森】新顔の猫・小鉄が来てたよ! 2022年6月29日
  • 【倉敷市】喫茶YESで大ボリュームのモーニングを食べたよ! 2022年6月28日
  • 【新作】岡山木村屋の福神漬サラダロールを食べたよ! 2022年6月27日
  • 大島てるで岡山市・泉田~青江の物件を調べてみた 2022年6月26日
  • 【急展開】謎の転覆車両に驚くべき変化が起きていた…!? 2022年6月25日
  • 玉仙岩協働公園にハイジのブランコがある!? 2022年6月24日
  • 【瀬戸内市】邑久駅に行ってきたよ! 2022年6月23日
  • 一等寺の御札の自販機を紹介するよ! 2022年6月22日
  • 【参院選】黒田 晋 元玉野市長の業績を考える 2022年6月21日
  • 【高梁市】久しぶりにパレット定食を食べてきたよ&コーポ・パレット 2022年6月21日

フォローする

RSS 岡山ニュース

  • JR岡山が新車両の愛称募集 「愛される列車になるように」 2022年6月7日
  • 岡山で子どもが作る映画のワークショップ 企画・撮影・編集・宣伝の全8回 2022年6月6日
  • 岡山に笑顔で接客するピザとパスタの店 メニューはなし、相談して注文 2022年6月3日
  • 障がい者にもモータースポーツ観戦を 岡山国際サーキットで実証実験へ 2022年6月2日
  • 岡山イノベーションコンテスト出場者募集 トレンドはDXとSDGs 2022年6月1日
  • 岡山県庁通り「マルゴデリ」が実験的に朝営業 バナナジュースなど4種類提供 2022年5月31日
  • 岡山で短編小説作り体験 アイデア発想から執筆まで 2022年5月30日
  • 岡山出身の弁護士がクリエーター向け書籍「ビジネススキル図鑑」刊行 2022年5月27日
  • 岡山に雑貨店「リントゥコト」 商品開発ストーリー添え販売 2022年5月26日
  • 岡山県内10店をバイクで巡るスタンプラリー カフェ・和菓子・海鮮丼など 2022年5月23日
Powered by WordPress | テーマ名Diamond