JavaScriptの参考書でXAMPPとnotepadを利用して勉強中です。下記のコードを実行すると

イメージ説明](d27dbfbd1c87d9f956285b4971f7978b.png)
と表示されます。

次にほかのタブ(例えばproduction)をクリックすると、タブメニューが消えて記事だけが表示されてしまいます。
"jQuery.html"、"production.txt"、jQuery2.html"、"CDN.html"、"event.html"はTabPanel.html、style.css,program.jsと同じフォルダーにあります。

試行錯誤したのですがうまくいきません。タブメニューが消えないようにするにはどこを直せばいいか教えてください。
お願いいたします。

//TabPanel.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="program.js"></script>
</head>
<body>
<div id="page">
  <ul>
    <li><a href="jQuery.html">HTML</a></li>
    <li><a href="production.txt">production</a></li>
    <li><a href="jQuery2.html">jQuery2.x</a></li>
    <li><a href="CDN.html">CDN</a></li>
    <li><a href="event.html">イベントリスナー</a></li>
  </ul>
  <div></div>
</div>
</body>
</html>

//program.js
jQuery(function($){
  
  //divのオブジェクト『$('#page')』を取得して変数『page』に格納する
  var page =$('#page');
  
  
  //selected：設定するクラス名（クラスセレクタ）
  $('> ul li:first a',page).addClass('selected');
  
  $('> div',page).load(
  
    $('> ul li:first a',page).attr('href'));
    
  $('> ul li:first a',page).click(function(e){
    
    //クリックされたa要素のクラス属性が『seleckted』でないことを条件にする
    if (!$(this).hasClass('seleckted')){
      
      $('> ul li:first a.seleckted',page).removeClass('selected');
      
      $(this).addClass('seleckted');
      
      //'> div'：このセレクターで取得した要素に読み込まれる
      //クリックされたa要素のhref値を参照してダウンロードする
      $('> div',page).load($(this).attr('href'));
    }
    
    //clickイベントをキャンセルするメソッドです
    e.preventDefault();
  });
});

//style.css
#page {
  width: 750px;
}
#page > ul {
  margin: 0px;
  padding: 0px;
}
#page > ul li {
  list-style-type: none;
  float: left;
  width: 150px;
  height: 50px;
  line-height: 200%;
}
#page > ul li a {
  display: block;
  text-decoration: none;
  text-align: center;
  background-color: #f6f;
  color: #000;
  border: solid 1px #888;
  border-bottom: none;
}
#page > ul li a.selected {
  color: #000;
  background-color: #fff;
}
#page > div {
  border: solid 1px #888;
  padding: 15px;
}

行動規範の内容に同意します

回答1件

ベストアンサー

セレクタが全体的におかしいですね

メニューをクリックしたらテキストデータをロードしてくるなら

javascript
1  $('ul a').on('click',function(e){
2    e.preventDefault();
3  });

的な処理が必要ですね

sample

こんな感じで

javascript
1$(function(){
2  $('#page a').on('click',function(e){
3    $('#page a.selected').removeClass('selected');
4    $(this).addClass('selected');
5    $('#page div').load($(this).attr('href'));
6    e.preventDefault();
7  }).eq(0).trigger('click');
8});

投稿2019/09/30 10:04

編集2019/09/30 11:06

yambejp

総合スコア114837

退会済みユーザー

2019/09/30 10:53

ありがとうございます。参考書のコードがおかしいということでしょうか。簡単なsampleを作って表示すると思ったように表示されるのですが、このコードに関してうまくいきません。申し訳ないのですがprogram.jsのどこを具体的に修正すればいいのでしょうか、教えていただけませんか。初めてなのでとりあえず読み終わってから復習する予定です。少しわかっているうちに動くようにしておきたいのですが。