質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

CSSでタブメニュー実装

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 270

nitarou2

score 11

質問です。Htmlで、各ページを変える時にタブメニューを作って、ページを変えるようにしたいと思っています。下記ホームページを参考にしましたが、タブを押しても、ページが差し替わりません。
加えて、ホームページ上の「使用したJavascript」の記述が、認識出来ていないのか?
文字として標準されてしまいます。
何が間違っているのでしょうか?
恐れ入りますが、ご教授願います。

https://webparts.cman.jp/button/tab/
このホームページを参照させてもらいました。

<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<style type="text/css">

/* --- タブ(ラジオボタン)のエリア ------------------------ */

#tabArea{

  line-height    : 1;                   /* 1行の高さ          */

  letter-spacing : 0;                   /* 文字間             */

  text-align     : center;              /* 文字位置は中央     */

}


 /* --- ラジオボタン ---------------------------------------- */

#tabArea input[type=radio] {

  display        : none;                /* ラジオボタン非表示 */

}


 /* --- ラジオボタン直後のlabel ----------------------------- */

#tabArea input[type=radio] + label {

  display        : inline-block;

  position       : relative;

  padding        : 6px 10px;            /* labelの余白 */

  font-size      : 12pt;                /* タブの文字サイズ   */

  font-weight    : bold;                /* タブは太文字       */

  border         : 3px solid #999;      /* 未選択タブのの枠線 */

  border-bottom  : none;                /* 下罫線は消す       */

  border-radius  : 5px 5px 0 0;         /* タブの上左右角丸   */

  margin         : 0 1px;               /* タブ間隔           */

  background     : #fff;                /* 未選択タブの背景色 */

  color          : #666;                /* 未選択タブの文字色 */

}


 /* --- 選択されたラジオボタン直後のlabel ------------------- */

#tabArea input[type=radio]:checked + label {

  border-color   : #4682B4;             /* 選択タブの枠線     */

  color          : #4682B4;             /* 選択タブの文字色   */

  cursor         : default;             /* デフォルトカーソル */

  z-index        : 2;                   /* 重なりを最前面へ   */

}


 /* --- 未選択ラジオボタン直後のlabelにマウスが乗った ------- */

#tabArea input[type="radio"]:not(:checked) + label:hover {

  background     : #b4cee2;             /* カーソルタブの背景 */

  cursor         : pointer;             /* リンクカーソル     */

}


 /* --- タブ下の本体エリア ---------------------------------- */

.tabBody{

  position       : relative;

  border         : 3px solid #4682B4;   /* 本体の枠線         */

  background     : #fff;                /* 本体の背景色       */

  margin-top     : -3px;                /* タブと罫線分重ねる */

  z-index        : 1;                   /* 未選択タブより全面 */

}

</style>





</head>



<body>



<div id="tabArea">


  <input type="radio" name="tab" id="tab1" onclick="tabClick(1)" checked>

    <label for="tab1">タブ1</label>


  <input type="radio" name="tab" id="tab2" onclick="tabClick(2)">

    <label for="tab2">タブ2</label>


  <input type="radio" name="tab" id="tab3" onclick="tabClick(3)">

    <label for="tab3">タブ3</label>


  <div class="tabBody"><p>サンプル</p><p id="tabNo">タブ1</p></div>


</div>



</body>



// ------------------------------------------------------------

//     タブがクリックされた

// ------------------------------------------------------------

function tabClick(argTabNo){

document.getElementById("tabNo").innerHTML = 'タブ'+argTabNo;

}



</html>
コード
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

仰る通り、js箇所が認識できていないようです。
js箇所を以下のように書き換えて、</body>の直前に入れてみてください。

<script type="text/javascript">
  function tabClick(argTabNo) {
    document.getElementById("tabNo").innerHTML = "タブ" + argTabNo;
  }
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/25 11:00

    早速回答ありがとうございました。
    お陰様で、無事に動きました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる