タブでスライド。CSSがうまくいかない

###実現したいこと
タブでスライドするアニメーションのCSSですが、下記の二箇所を解決したいです。
・タブ2要素が回り込みしてしまい、タブ１要素と重なる（下にくる）。
・CSSで設定していない、タブ1要素の下とタブ2要素の下謎の白スペースができる

###コード

view
1<div id="wrap">
2  <div id="tab1" class="tab selected">タブ1</div>
3  <div id="tab2" class="tab">タブ2</div>
4
5  <div id="tab-container">
6    <div id="slide" class="">
7      <div id="first" class="box">
8        <div class="box-red"></div>
9      </div>
10      <div id="second" class="box">
11        <div class="box-blue"></div>
12        <div class="box-blue"></div>
13      </div>
14    </div>
15  </div>
16</div>

css
1#wrap{
2  background-color:white;
3}
4.tab {
5    height: 50px;
6    width: 50%;
7    float: left;
8}
9.selected {
10    color: black;
11    font-weight:bold;
12    background-color:grey;
13}
14#tab-container {
15    position: relative;
16    width: 100%;
17    overflow: hidden;
18    clear: left;
19}
20.box {
21    display: inline-block;
22    white-space: nowrap;
23    width: 100%;
24}
25.box-red{
26  height:80px;
27  width:80px;
28  border:2px solid black;
29  background-color:red;
30}
31.box-blue{
32  height:80px;
33  width:80px;
34  border:2px solid black;
35  background-color:blue;
36}
37#first {
38    top: 0px;
39    left: 0px;
40}
41#second {
42    top: 0px;
43    left: 100%;
44}
45#slide {
46    transition: transform 1s ease-in-out 0s;
47    -moz-transition: -moz-transform 1s ease-in-out 0s;
48    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
49}
50.move-to-first {
51    transform: translateX(0px);
52    -moz-transform: translateX(0px);
53    -webkit-transform: translateX(0px);    
54}
55.move-to-second {
56    transform: translateX(-100%);
57    -moz-transform: translateX(-100%);
58    -webkit-transform: translateX(-100%);
59}

js
1$(document).on('turbolinks:load', function() {
2  $("#tab1").click(moveToFirst);
3  $("#tab2").click(moveToSecond);
4
5  function moveToFirst() {
6    $("#slide").attr('class', 'move-to-first');
7    $(".tab").attr('class', 'tab');
8    $("#tab1").attr('class', 'tab selected');
9  }
10
11  function moveToSecond() {
12    $("#slide").attr('class', 'move-to-second');
13    $(".tab").attr('class', 'tab');
14    $("#tab2").attr('class', 'tab selected');
15  }
16});

お分かりの方、ぜひご教示お願いします。

no1knows

2020/02/12 10:29

ちなみに「タブでスライド」とはどういう動作のことでしょうか？サンプルサイトなどありましたら教えていただければと思います。（前回の質問に回答したのですが、タイトルをあまり気にしていませんでした。ごめんなさい。）

tomtom1

2020/02/12 10:52

ご質問ありがとうございます！言葉足らずで申し訳ありません。タブを押したら、その要素画面が横からスライドしてくるイメージです。参考サイトは以下になります。 https://kodocode.net/design-css-tab/ ・タブ切り替え時にスライドアニメーションで変化。JSの内容もシンプルでGOOD。という中央あたりにあるコードを参考にしています。

x_x

2020/02/13 05:12

参考サイトがあるのであればそのまま使えばいいのでは？提示コードは比較してみるといろいろと足りないところがありますが、意図があるのでしょうか？

tomtom1

2020/02/18 13:43

ご回答有難うございます！tab-containerの高さの設定を外したく、参考サイトと少し違うコードになっておりました！別質問で頂いた回答の方法で工作した結果、うまくできました！有難うございました！

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

回答1件

ベストアンサー

とりあえずHTMLだけ確認したのですが、下記のような形だといかがでしょうか？

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

  <div id="tab-container">
    <div id="slide" class="">
      <div id="first" class="box">
        <div class="box-red"></div>
      </div>
      <div id="second" class="box">
        <div class="box-blue"></div>
        <div class="box-blue"></div>
      </div>
    </div>
  </div>
</div>

ご提示頂いたものはインデントがずれており、id="first"の中にid="second"が入っていました。

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

  <div id="tab-container">
    <div id="slide" class="">
      <div id="first" class="box">
        <div class="box-red"></div>
        <div id="second" class="box">
          <div class="box-blue"></div>
          <div class="box-blue"></div>
        </div>
      </div>
    </div>
  </div>
</div>

追記

下記にて期待した動作が確認できるかと思います。
x_xさんからも追記がありますように基本的には、参考サイトをベースに修正していくのが望ましいです。
またCSSの修正ポイントも追記しましたので、参考サイトと比べてみて下さい。

html
1<div id="wrap">
2  <div id="tab1" class="tab selected">Tab 1</div>
3  <div id="tab2" class="tab">Tab 2</div>
4
5  <div id="container">
6    <div id="slide" class="">
7      <div id="first" class="box">
8        <p>Check this Out</p>
9      <div class="box-red"></div>
10      </div>
11      <div id="second" class="box"><p>TAB2</p>
12        <div class="flex"><!-- ここはFlexで横並び -->
13          <div class="box-blue"></div>
14          <div class="box-blue"></div>
15        </div>
16      </div>
17    </div>
18  </div>
19</div>

css
1body, html {
2  margin: 0px;
3  padding: 0px;
4  width: 100%;
5  height:100%;
6  text-align: center;
7}
8
9#wrap {
10  width: 100%; //←この幅
11  margin: 0 auto;
12  margin-top: 10px;
13}
14
15.tab {
16    height: 40px;
17    width: 50%; //←この幅
18    line-height: 40px;
19    text-align: center;
20    font-size: 20pt;
21    float: left;
22    cursor: pointer;
23}
24
25.selected {
26    background-color: black;
27    color: white;
28    border: none;
29}
30
31#container {
32    position: relative;
33    width: 100%; //←この幅
34    height: 1000px; //←この高さ
35    overflow: hidden;
36    clear: left;
37}
38
39.box {
40    display: inline-block;
41    white-space: nowrap;
42    position: absolute;
43    width: 100%; //←この幅
44    height: 1000px; //←この高さ
45    line-height: 200px;
46    text-align: center;
47    font-size: 28pt;
48    cursor: pointer;
49}
50
51#first {
52    top: 0px;
53    left: 0px;
54}
55
56#second {
57    top: 0px;
58    left: 100%; //←この移動距離
59}
60
61#slide {
62    transition: transform 1s ease-in-out 0s;
63    -moz-transition: -moz-transform 1s ease-in-out 0s;
64    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
65}
66
67.move-to-second {
68    transform: translateX(-100%); //←この移動距離
69    -moz-transform: translateX(-100%); //←この移動距離
70    -webkit-transform: translateX(-100%); //←この移動距離
71}
72
73.move-to-first {
74    transform: translateX(0px);
75    -moz-transform: translateX(0px);
76    -webkit-transform: translateX(0px);    
77}
78
79.flex{
80  display:flex; //←これで横並び
81}
82.box-red{
83  height:80px;
84  width:80px;
85  border:2px solid black;
86  background-color:red;
87}
88.box-blue{
89  height:80px;
90  width:80px;
91  border:2px solid black;
92  background-color:blue;
93}

jQuery
1$(document).on('turbolinks:load', function() {
2  $("#tab1").click(moveToFirst);
3  $("#tab2").click(moveToSecond);
4
5  function moveToFirst() {
6    $("#slide").attr('class', 'move-to-first');
7    $(".tab").attr('class', 'tab');
8    $("#tab1").attr('class', 'tab selected');
9  }
10
11  function moveToSecond() {
12    $("#slide").attr('class', 'move-to-second');
13    $(".tab").attr('class', 'tab');
14    $("#tab2").attr('class', 'tab selected');
15  }
16});