横にタブをスライドするCSSがうまくいかない

Question

###実現したいこと
タブをクリックすると、横にスーッとスライドするようにしたいです。
タブをクリックしても、反応が得られません。
$("#tab1").click(moveToFirst);のあたりが怪しいと思っていますが、わからずにいます。

また、他のjsはうまく反応を得られています。

###コード

<div id="wrap">
  <div id="tab1" class="tab selected">Tab 1</div>
  <div id="tab2" class="tab">Tab 2</div>

  <div id="container">
    <div id="slide" class="">
      <div id="first" class="box">1タブ内容</div>
      <div id="second" class="box">２タブ内容</div>
    </div>
  </div>
</div>

//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
$("#tab1").click(moveToFirst);
$("#tab2").click(moveToSecond);

function moveToFirst() {
    $("#slide").attr('class', 'move-to-first');
    $(".tab").attr('class', 'tab');
    $("#tab1").attr('class', 'tab selected');
}

function moveToSecond() {
    $("#slide").attr('class', 'move-to-second');
    $(".tab").attr('class', 'tab');
    $("#tab2").attr('class', 'tab selected');
}

.tab {
    height: 40px;
    width: 100px;
}

.selected {
    background-color: black;
}

#container {
    position: relative;
    overflow: hidden;
    clear: left;
}

.box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 400px;
    height: 200px;
}

#first {
    top: 0px;
    left: 0px;
}

#second {
    top: 0px;
    left: 400px;
}

#slide {
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}
.move-to-first {
    transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);    
}
.move-to-second {
    transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -webkit-transform: translateX(-400px);
}

Answer 1

position: absolute;で子要素がフロートするので、container の高さが 0 になっていて、overflow: hidden;で子要素が隠れてしまってます。

containerのサイズを適切に設定するといいでしょう。

#container {
    position: relative;
    overflow: hidden;
    clear: left;
    width: 400px; /*追加*/
    height: 200px; /*追加*/
}

Comments

[tomtom1]

ご回答ありがとうございます！今回、Turbolinksによる影響でした！
しかしながら、おっしゃる通り、CSSに不具合がありました。
新たに質問を作成しましたので、ご確認頂ければ幸いです。
https://teratail.com/questions/240948?modal=q-comp

[tomtom1]

先ほどご指摘頂いた内容を完全に理解しました。そういうことだったのですね。ありがとうございます。
本内容の続きで、「要素の高さを中のフロートした子要素の高さに合わせたい」というタイトルで新たに質問を発行しましたので、よろしければご確認お願いします。
https://teratail.com/questions/240998?modal=q-comp

Answer 2

Turbolinksによる影響は考えられないでしょうか？

$(document).on('turbolinks:load', function() {
  //ここにJqueryのコードを記載する。
});

Comments

[tomtom1]

そうでした、ご指摘ありがとうございます。無事解決しました！

[no1knows]

それは良かったです！