ひとつのボタンアクションで複数の処理を行ないたいです。
横並びの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>
回答2件
あなたの回答
tips
プレビュー