ひとつのボタンアクションで複数の処理

ひとつのボタンアクションで複数の処理を行ないたいです。
横並びの4つのボタンがあり、それをクリックすると押されたボタンの色が変わり、横並びのボックスの右側の中身がmargin-left:-100%づつ移動する。

ひとつのボックスでは出来たのですが、横並びのボックスを3つ縦に並べて同じ様に横移動したいのですが、うまくいきません。

ざっくりとしていますが、下記がおおまかなソースです（javascriptの問題と複数のIDの問題と思いますので、CSSは省略しています）。
また一応画像にて理想の動きを記しています。

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" language="javascript">

function move_bt01(){
	target = document.getElementsByClassName("move-in");        
	target.style.marginLeft="0%";
}
function move_bt02(){
	target = document.getElementsByClassName("move-in");        
	target.style.marginLeft="0%";
}
function move_bt03(){
	target = document.getElementsByClassName("move-in");        
	target.style.marginLeft="0%";
}
function move_bt04(){
	target = document.getElementsByClassName("move-in");        
	target.style.marginLeft="0%";
}
</script>

<script language="javascript">
$(function(){
  var btn = $('li');
  btn.click(function(){
    btn.removeClass('active');
    $(this).addClass('active');
  });
});
</script>

<style>
	.type-list-bt{
		width: 100%;
	}
	.type-list-bt ul{
		font-size: 0;
		width: 100%;
		max-width: 816px;
		margin:0 auto 20px;
		box-sizing: border-box;
		padding: 0;
		margin-top: 30px;
	}
	.type-list-bt li{
		display: inline-block;
		width: 23%;
		margin: 0 1%;
		font-size: 14px;
		background-color:#a4a4a4;
		border-radius: 3px;
		text-align: center;
		padding: 5px;
		color: #FFF;
		box-sizing: border-box;
		list-style: none;
		cursor: pointer;
	}
	.active {
	  background-color: #329096!important;
	  color: #FFF!important;
		border:none!important;
	}
    .left-box{
        float: left;
        width: 50%;
		border: solid 1px #DDD;
		height: 50px;
		box-sizing: border-box;
    }
    .right-box{
        float: right;
        width: 50%;
		border: solid 1px #DDD;
		height: 50px;
		box-sizing: border-box;
		overflow: hidden;
    }
    .move-in{
        width: 400%;
		background-color: #C5D1FF;
		height: 40px;
    }
	.move-in table{
		width: 100%;
	}
	.move-in td{
		width: 25%;
	}
</style>

<body>
    <div class="type-list-bt">
            <ul>
                <a onclick="move_bt01();return false;"><li class="active">A</li></a>
                <a onclick="move_bt02();return false;"><li>B</li></a>
                <a onclick="move_bt03();return false;"><li>C</li></a>
                <a onclick="move_bt04();return false;"><li>D</li></a>
            </ul>
    </div>

<div class="left-box"></div>
<div class="right-box">
<div class="move-in">
	<table width="100%" border="0">
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </tbody>
</table></div>
</div>

<!-- 下の2つのボックスを追加しても動かない-->
<div class="left-box"></div>
<div class="right-box">
<div class="move-in">
<table width="100%" border="0">
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </tbody>
</table>
</div>
</div>

<div class="left-box"></div>
<div class="right-box">
<div class="move-in">
<table width="100%" border="0">
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </tbody>
</table></div>
</div>


</body>
</html>

kszk311

2018/09/11 03:47

ソースコードは、``` ... ```で囲むか、対象のコードを選択し「code」ボランで囲んで見やすくしてもらえますか

x_x

2018/09/11 04:21

提示コードには水色の箇所などないように見えますが、足りないところはないでしょうか？

dethtroy

2018/09/11 04:27

codeで直しました。ご不便おかけして申し訳ございません。

dethtroy

2018/09/11 04:28

水色および細かいスタイルに関しては、省略しています。ご不便おかけして申し訳ございません。

x_x

2018/09/11 04:29

何をどうしたいのかわからないと処理のしようがないと思いますが？

kszk311

2018/09/11 04:30

細かくは見れていないですが、せっかくjQueryを使っているので、jQueryで書くのがいいと思います。each使ってみるとどうでしょう？

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

回答2件

ベストアンサー

IDは重複できません。
IDではなく共通のクラス名にするなどした上で、
「document.getElementById("move-in")」ではなく
「document.getElementsByClassName(クラス名)]にするのが良いかと。

もしくはそれぞれのIDを一意なものに変更するとか。

追記
「move_bt01()」(他も同様)の中身を以下のように書き換えて挙動を確認してみましたが、
問題なく幅の調整ができました。

jQuery
1$(".move-in").css('width', '50%');
2//02,03,04はそれぞれ70%,90%,100%で確認

ので、クラス名等ではなスタイルの指定方法を見直す必要がありそうです。

投稿2018/09/11 04:08

編集2018/09/11 05:23

madoka9393

総合スコア992

ggsu_koma

2018/09/11 04:11

その方向でよろしいと思いますが、 document.getElementsByClassName(クラス名)ではないでしょうか

madoka9393

2018/09/11 04:12

ご指摘の通りです！修正しておきます…。

dethtroy

2018/09/11 04:26

function move_bt01(){ target = document.getElementsByClassName("move-in"); target.style.marginLeft="0%"; } これでよいのでしょうか？？該当のIDをclassに変更しました。ですが、うまくいきません。

madoka9393

2018/09/11 05:06

申し訳ないのですが、提示していただいたソースでは画像の状態の再現すらできないので、コードから修正が必要な箇所にあたりをつけていくのは少々私には難しいです…。

dethtroy

2018/09/11 05:13

分かりづらかったため、ソースを修正しました

dethtroy

2018/09/11 05:32

$(".move-in").css('width', '50%'); //02,03,04はそれぞれ70%,90%,100%で確認これで全て解決できました！ご協力いただいた皆様全員にベストアンサーとしたいのですが、madoka9393をベストアンサーにさせていただきました。ご協力ありがとうございました！！

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