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

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

ただいまの
回答率

90.36%

  • Ruby on Rails

    8116questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    7476questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • ログイン

    123questions

    ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

  • Highcharts

    40questions

    HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

  • タブ

    28questions

    コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

リロードをせずに、jQueryを使ったタブの切り替えをしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,020

前提・実現したいこと

railsを使用して、あるWebサービスを作っていて、webページのログイン画面で、jQueryを使ってタブの切り替え機能を作リました。しかし、いざ実行をしてみると、ページに移動し、タブをクリックしても反応をせず、一度サイトのリロードをすると、タブが切り替わる、というような状況です。なぜ一度リロードしなければ、タブが正常に動作をしないのかがわからず、質問させていただいております。

発生している問題・エラーメッセージ

エラーメッセージ

Chrome上でインスペクトした時に出てきました。
highstock.js?body=1:9 Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock


$(function(){
  $('#tab-menu li').on('click', function(){
    if($(this).not('selected')){
      // タブメニュー
      $(this).addClass('selected').siblings('li').removeClass('selected');
      // タブの中身
      var index = $('#tab-menu li').index(this);
      $('#tab-box div').eq(index).addClass('selected').siblings('div').removeClass('selected');
    }
  });
});

new.html.erb

...
  <div id="tab-menu" class="tab-menu label">
            <ul>
              <li class="selected"><p>大学生</p></li>
              <li><p>社会人</p></li>
              <li><p>その他</p></li>
            </ul>

        <div id ="tab-box" class="label">
          <div class="selected">
            <%= f.label :文理選択 %><br />
            <%= f.select :culture_or_science, ['文系', '理系'] %>

            <br /><%= f.label :大学%>
            <%= f.text_field :university, :placeholder =>'大学名を入力してください'%>

            <%= f.label :学部%><br />
            <%= f.text_field :department, :placeholder => '学部の種類を選択してください'%>

            <%= f.label :卒業年%><br />
            <%= f.text_field :graduation_year, :placeholder => '卒業される年度を記入してください'%>
        </div>


       <div>
              <%= f.label :会社名 %><br />
              <%= f.text_field :company, :placeholder => '会社名を記入してください'%>
      </div>


      <div>
            <%= f.label :その他の所属 %><br />
            <%= f.text_field :other, :placeholder => '所属名を記入してください'%>
          </div>
      </div>

application.css

.tab-menu ul {
  width:100%;
  margin: 0;
  padding: 0;
}

.tab-menu li {
  display: inline-block;
  width: 32%;
  height: 22px;
  cursor: pointer;
  background-color: #81D0FE;
  font-size: 14px;
  color: #fff;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  text-align: center;
}

.tab-menu li.selected {
  background-color: #fff;
  color: #81D0FE;
}

.contents {
  height: 360px;
  padding: 20px;
}

#tab-box div{
  display: none;
}
#tab-box div.selected {
  display: block;
  -webkit-animation: anime1 2s ease;
}

試したこと

(javascriptはほぼ初めて触るので)Highcharts error #16: というエラーが意味することをあまり理解することができませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報
-railsの"devise"gemを使用してログイン画面を作っております。
-application.js上に"//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
"記述しています。
足りない情報がございましたら、追記いたします。ご回答心よりお待ちしております。
by駆け出しのrubyプログラマー

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

turbolinks5によるものです。
JSをそのままコピペではなく
確かこういうふうに置き換えると治ったと思います。

document.addEventListener("turbolinks:load", function() {
 $('#tab-menu li').on('click', function(){
    if($(this).not('selected')){
      // タブメニュー
      $(this).addClass('selected').siblings('li').removeClass('selected');
      // タブの中身
      var index = $('#tab-menu li').index(this);
      $('#tab-box div').eq(index).addClass('selected').siblings('div').removeClass('selected');
    }
  });
})


参考サイト

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/03 11:05

    無事解決しました。本当にありがとうございます!

    キャンセル

同じタグがついた質問を見る

  • Ruby on Rails

    8116questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • jQuery

    7476questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • ログイン

    123questions

    ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

  • Highcharts

    40questions

    HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

  • タブ

    28questions

    コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。