如何给Div分配具体职位？

Question

I have a Button Onclick Function which makes a box appear when clicked on.

I want that box to appear at a certain place, and since i have 2 tables i cant give it positions or something since the position will be different cuz the tables are next to each other. And somehow the second table is a bit lower then the other one. can someone help me with that aswell please?

Here's my full code.

---

 function footafel(id){ for(var i=1; i<=13; i++){ document.getElementById('tafel'+i).className = 'hide'; } if(id == ''){ return false; } else { document.getElementById('tafel'+id).className = 'show'; } } 

 div { width: 50%; height: 50px; border: solid 1px black; } button { background-color: white; border: solid 2px lightblue; width: 150px; height: 60px; margin: 10px; text-align: center; line-height: 56px; } #tablerechts { position: relative; bottom: 40px; } table { margin-left: 25px; width: 300px; } .hide { display: none; } .show { display: block; } 

 <table> <tr> <td id="tablelinks"> <div id="tafel1" class="hide">Tafel 1</div> <div id="tafel2" class="hide">Tafel 2</div> <div id="tafel3" class="hide">Tafel 3</div> <div id="tafel4" class="hide">Tafel 4</div> <div id="tafel5" class="hide">Tafel 5</div> <div id="tafel6" class="hide">Tafel 6</div> <div id="tafel7" class="hide">Tafel 7</div> <button onclick="footafel('1')">Tafel oefening 1</button> <button onclick="footafel('2')">Tafel oefening 2</button> <button onclick="footafel('3')">Tafel oefening 3</button> <button onclick="footafel('4')">Tafel oefening 4</button> <button onclick="footafel('5')">Tafel oefening 5</button> <button onclick="footafel('6')">Tafel oefening 6</button> <button onclick="footafel('7')">Tafel oefening 7</button> </td> <td id="tablerechts"> <div id="tafel8" class="hide">Tafel 8</div> <div id="tafel9" class="hide">Tafel 9</div> <div id="tafel10" class="hide">Tafel 10</div> <div id="tafel11" class="hide">Tafel 11</div> <div id="tafel12" class="hide">Tafel 12</div> <div id="tafel13" class="hide">Tafel 13</div> <button onclick="footafel('8')">Tafel oefening 8</button> <button onclick="footafel('9')">Tafel oefening 9</button> <button onclick="footafel('10')">Tafel oefening 10</button> <button onclick="footafel('11')">Tafel oefening 11</button> <button onclick="footafel('12')">Tafel oefening 12</button> <button onclick="footafel('13')">Tafel oefening 13</button> </td> </table> 

Thanks in advance.

Answer 1

You forgot to close the <tr> , that's why your tables are not aligned. That being said, I ill advise you to use table this way. The use of tables are in decline, and they must be used if what you want to display is really a table, with a header, and lines, like an excel sheet for example.

I suggest you separating the buttons from what they will display, putting the buttons in a separate div, and the content that must appear, in another div at the top of it, this will prevent the columns from desalign.

I used display: flex in each "table" with flex-flow: column to get the desired "table" effect, and also display: flex on the parent to keep them aligned, which is a feature supported by every browser already. I also suggest an improvement to your script, by taking only the <divs> which has the .show class and giving them the hide class, insted of hard codding a specific number, which makes your page able to scale to any number of buttons you want.

Hope it helps.

 function footafel(id){ var allDivsToHide = document.getElementsByClassName('show'); for(var i=0; i < allDivsToHide.length; i++){ allDivsToHide[i].className = 'hide'; } if(id == ''){ return false; } else { document.getElementById('tafel' + id).className = 'show'; } } 

 .table { display: flex; flex-flow: column; } button { background-color: white; border: solid 2px lightblue; width: 150px; height: 60px; margin: 10px; text-align: center; line-height: 56px; } .hide { display: none; } .show { display: block; } 

 <div style="display: flex;"> <div id="tablelinks" class="table"> <button onclick="footafel('1')">Tafel oefening 1</button> <button onclick="footafel('2')">Tafel oefening 2</button> <button onclick="footafel('3')">Tafel oefening 3</button> <button onclick="footafel('4')">Tafel oefening 4</button> <button onclick="footafel('5')">Tafel oefening 5</button> <button onclick="footafel('6')">Tafel oefening 6</button> <button onclick="footafel('7')">Tafel oefening 7</button> </div> <div id="tablerechts" class="table"> <button onclick="footafel('8')">Tafel oefening 8</button> <button onclick="footafel('9')">Tafel oefening 9</button> <button onclick="footafel('10')">Tafel oefening 10</button> <button onclick="footafel('11')">Tafel oefening 11</button> <button onclick="footafel('12')">Tafel oefening 12</button> <button onclick="footafel('13')">Tafel oefening 13</button> </div> <div id="tablelinks-content" class="table"> <div id="tafel1" class="hide">Tafel 1</div> <div id="tafel2" class="hide">Tafel 2</div> <div id="tafel3" class="hide">Tafel 3</div> <div id="tafel4" class="hide">Tafel 4</div> <div id="tafel5" class="hide">Tafel 5</div> <div id="tafel6" class="hide">Tafel 6</div> <div id="tafel7" class="hide">Tafel 7</div> </div> <div id="tablerechts-content" class="table"> <div id="tafel8" class="hide">Tafel 8</div> <div id="tafel9" class="hide">Tafel 9</div> <div id="tafel10" class="hide">Tafel 10</div> <div id="tafel11" class="hide">Tafel 11</div> <div id="tafel12" class="hide">Tafel 12</div> <div id="tafel13" class="hide">Tafel 13</div> </div> </div> 

Answer 2

There are two ways to do this.

The first method uses the style attribute and is generally frowned upon as you want to keep all your styling in your CSS file. Example:

 <div id="tafel1" class="hide" style="position:absolute;top:200px;">Tafel 1</div>

You can also use position:relative; to position the div relative to the element that contains it (in this case it would be the table that it's inside).

The second way is to go into your CSS and style the div from there.

You can also target your tafel1 div in the CSS like this:

#tafel1{
    position:absolute;
    top:200px;
}