Question

这里有问题的代码：

#container {  /*CSS part*/
  width: 606px;
  height: 400px;
  border: 1px #434343 solid;
  border-radius: 7px;
  border-top: none;
}

#tabs {
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid;
  cursor: pointer;
  border-radius: 7px 7px 0 0;
}

#content {
  height: 300px;
  text-align: center;
}

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

#tab1 {
  background-color: blue;
}

#tab2 {
  background-color: red;
}

#tab3 {
  background-color: green;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

<div id="container"> <!-- html part -->
<ul id="tabs">
  <li id="blue">blue</li>
  <li id="red">red</li>
  <li id="green">green</li>
</ul>
<div id="content">
  <div id="tab1" class="subtab">This is tab1!</div>
  <div id="tab2" class="subtab">This is tab2!</div>
  <div id="tab3" class="subtab">This is tab3!</div>
</div>

var tablist = document.getElementById('tabs').children; //js part
var sublist = document.getElementsByClassName('subtab');

for (var i = 0; i < tablist.length; i++) {
  tablist[i].index = i; //保存每次迭代的i值

  tablist[i].addEventListener('click', function () {
    for (var x = 0; x < sublist.length; x++) {
      sublist[x].style.display = 'none';
    }

    sublist[this.index].style.display = 'block';
    this.style.borderBottom = 'none';
  })
}

很抱歉，html部分似乎没有出现，降价对我来说总是很痛苦。

这里有完整的代码的 demo

奇怪的是标签内容（子标签类）的文本位置，如果您按蓝色 - >红色 - >绿色的顺序单击，文本在中心显示正常，但是，如果您先单击绿色文本将显示右对齐，然后单击蓝色，然后您将发现文本位置将是正确的位置。

有几种情况，但基本上就是这个问题。

为什么？

Answer 1

我刚刚将text-align规则添加到.subtab类，如下所示：

.subtab {
  display: none;
  text-align: center;
  height: 100%;
}

然后，在JS中，注释掉

this.style.borderBottom = 'none';

完美地工作

Answer 2

我通过指定位置和宽度对您的#content id做了一些更改，现在它应该运行良好：

#content {
  height: 300px;
  text-align: center;
  position: absolute;
  width: inherit;
}

Answer 3

问题是由<ul>元素（标签容器）的高度引起的。您已指定：

#tabs {
    height: 100px;
}

和

#tabs li {
    height: 100px;
}

但没有考虑边框的2个额外像素。

修复

要解决此问题，请将<ul>元素的高度更改为102px：

#tabs {
    height: 102px;
    ...
}

Answer 4

这是盒子大小的问题，您可以通过在CSS下面添加以下类来解决此问题

div#container, div#container * {
    box-sizing: border-box;
}

您可以了解更多关于大小调整https://css-tricks.com/box-sizing/

的信息

Answer 5

这是Working Jsfiddle

刚刚将position:absolute;和width:100%;添加到您的.subtab css规则

以下是代码段。

最终.subtab

.subtab {
  display: none;
  height: 100%;
  text-align: center;
  position:absolute;
  width:100%;
}

var tablist = document.getElementById('tabs').children;
    var sublist = document.getElementsByClassName('subtab');
    
    for (var i = 0; i < tablist.length; i++) {
      tablist[i].index = i; //store the i value for every iteration
      
      tablist[i].addEventListener('click', function () {
        for (var x = 0; x < sublist.length; x++) {
          sublist[x].style.display = 'none';
        }
        
        sublist[this.index].style.display = 'block';
        this.style.borderBottom = 'none';
      })
    }

#container {
      width: 606px;
      height: 400px;
      border: 1px #434343 solid;
      border-radius: 7px;
      border-top: none;
    }
    
    #tabs {
      width: 100%;
      height: 100px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #tabs li {
      float: left;
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid;
      cursor: pointer;
      border-radius: 7px 7px 0 0;
    }
    
    #content {
      height: 300px;
      text-align: center;
    }
    
    .subtab {
      display: none;
      height: 100%;
      text-align: center;
      position:absolute;
      width:100%;
    }
    
    #tab1 {
      background-color: blue;
    }
    
    #tab2 {
      background-color: red;
    }
    
    #tab3 {
      background-color: green;
    }
    
    #blue {
      background-color: blue;
    }
    
    #red {
      background-color: red;
    }
    
    #green {
      background-color: green;
    }

<body>
 <h1>simple tab</h1>
  <div id="container">
    <ul id="tabs">
      <li id="blue">blue</li>
      <li id="red">red</li>
      <li id="green">green</li>
    </ul>
    <div id="content">
      <div id="tab1" class="subtab">This is tab1!</div>
      <div id="tab2" class="subtab">This is tab2!</div>
      <div id="tab3" class="subtab">This is tab3!</div>
    </div>
  </div>
  
  
</body>

我的简单代码中的奇怪文本位置

5 个答案:

修复