Question

我有一个按钮Onclick功能，点击时会出现一个框。

我希望那个盒子出现在某个地方，因为我有2张桌子我不能给它位置或者什么，因为位置会不同，因为桌子彼此相邻。不知何故，第二个表比另一个表略低。有人可以帮助我吗？

这是我的完整代码。

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>

提前致谢。

Answer 1

您忘记关闭<tr>，这就是您的表格未对齐的原因。话虽如此，我建议你用这种方式使用餐桌。表格的使用正在下降，如果您想要显示的内容实际上是一个表格，带有标题和行，例如excel表格，则必须使用它们。

我建议你将按钮与它们显示的内容分开，将按钮放在一个单独的div中，并将必须出现的内容放在顶部的另一个div中，这样可以防止列脱离。

我在display: flex的每个“表格”中使用flex-flow: column来获得所需的“表格”效果，并在父级上使用display: flex来保持它们对齐，这是支持的功能每个浏览器已经。我还建议对您的脚本进行改进，方法是只使用<divs>类，.show类，并为其提供hide类，并对特定数字进行硬编码，从而使您的页面成为可能能够扩展到你想要的任意数量的按钮。

希望它有所帮助。

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

有两种方法可以做到这一点。

第一种方法使用style属性，因为您希望将所有样式保存在CSS文件中，因此通常不赞成。例如：

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

你也可以使用position：relative;将div相对于包含它的元素定位（在这种情况下，它将是它内部的表）。

第二种方法是进入你的CSS并从那里设置div的样式。

你也可以像这样在CSS中定位你的tafel1 div：

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

我如何给Div一个特定的位置？

2 个答案: