Question

我正在尝试使用 jquery-ui 替换旧的标签设置。

我发现this codepen工作正常，但有很多选项卡没有环绕容器时出现问题（请参阅this codepen ）。

使用javascript确实可以解决这个问题，但我现在正试图避免它。

由于

＆＃13;

* {
  margin: 0;
  padding: 0;
}

h1,
h3 {
  text-transform: uppercase;
  font-weight: normal;
}

.tabs {
  width: 600px;
  display: flex;
  margin: 40px auto;
  position: relative;
  flex-wrap: wrap;
}

.tabs .tab {
  display: block;
}

.tabs .tab>input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tabs .tab>label {
  display: block;
  padding: 6px 80px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  color: #FFF;
  background: #4A83FD;
}

.tabs .content {
  z-index: 0;
  /* or display: none; */
  overflow: hidden;
  width: 600px;
  padding: 25px;
  position: absolute;
  top: 27px;
  left: 0;
  background: #303030;
  color: #DFDFDF;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.tabs>.tab>[id^="tab"]:checked+label {
  top: 0;
  background: #303030;
  color: #F5F5F5;
}

.tabs>.tab>[id^="tab"]:checked~[id^="tab-content"] {
  z-index: 1;
  /* or display: block; */
  opacity: 1;
  transition: opacity 400ms ease-out;
}

＆＃13;

<ul class="tabs">
  <li class="tab">
    <input type="radio" name="tabs" checked="checked" id="tab1" />
    <label for="tab1">One</label>
    <div id="tab-content1" class="content">
      <h1>Tab content 1</h1>
      <hr/>
      <h3>Aliquam tristique orci non facilisis lobortis</h3>
      <br/>
      <img src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" width="100" style="float: left; margin-right: 10px;" />
      <p>Interdum et malesuada </p>
    </div>
  </li>

  <li class="tab">
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2">Two</label>
    <div id="tab-content2" class="content">
      <h1>Tab content 2</h1>
      <hr/>
      <h3>Ut bibendum augue vel magna rhoncus</h3>
      <br/>
      <p>Nam cursus, massa ac imperdiet posuer.</p>
    </div>
  </li>

  <li class="tab">
    <input type="radio" name="tabs" id="tab3" />
    <label for="tab3">Three</label>
    <div id="tab-content3" class="content">
      <h1>Tab content 3</h1>
      <hr/>
      <h3>Praesent ac accumsan urna. Mauris lorem purus</h3>
      <br/>
      <p>Suspendisse vulputate nunc ac pretium pulvinar</p>
    </div>
  </li>

  <li class="tab">
    <input type="radio" name="tabs" id="tab4" />
    <label for="tab4">Four</label>
    <div id="tab-content4" class="content">
      <h1>Tab content 4</h1>
      <hr/>
      <h3>Class aptent taciti sociosqu ad litora torquen</h3>
      <br/>
      <p>Fusce in malesuada ligula. Donec eleifend dui eu mi condimentum interdum. </p>
    </div>
  </li>

</ul>

＆＃13;

Answer 1

据我了解，我认为你必须将 top: 27px 改为 top: 100% .tabs .content 上课。

小提琴链接：https://codepen.io/bhuwanb9/pen/RxLvPP

检查以下代码段

body { font: 13px Verdana; } * { margin: 0; padding: 0; } h1, h3 { text-transform: uppercase; font-weight: normal; } .tabs { width: 600px; display: flex; margin: 40px auto; position: relative; flex-wrap: wrap; list-style-type: none; } .tabs .tab {border:1px solid #fff;} .tabs .tab>input[type="radio"] { position: absolute; top: -9999px; left: -9999px; } .tabs .tab>label { display: block; padding: 6px 30px; font-size: 12px; text-transform: uppercase; cursor: pointer; position: relative; color: #FFF; background: #4A83FD; } .tabs .content { z-index: 0; width: 600px; padding: 25px; position: absolute; top: 100%; left: 0; background: #303030; color: #DFDFDF; opacity: 0; transition: opacity 400ms ease-out; } .tabs>.tab>[id^="tab"]:checked+label { top: 0; background: #303030; color: #F5F5F5; } .tabs>.tab>[id^="tab"]:checked~[id^="tab-content"] { z-index: 1; /* or display: block; */ opacity: 1; transition: opacity 400ms ease-out; }

<ul class="tabs"> <li class="tab"> <input type="radio" name="tabs" checked="checked" id="tab1" /> <label for="tab1">One</label> <div id="tab-content1" class="content"> One </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">Two</label> <div id="tab-content2" class="content"> Two </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab3" /> <label for="tab3">Three</label> <div id="tab-content3" class="content"> Three </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab4" /> <label for="tab4">Four</label> <div id="tab-content4" class="content"> Four </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab5" /> <label for="tab5">Five</label> <div id="tab-content5" class="content"> Five </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab6" /> <label for="tab6">Six</label> <div id="tab-content6" class="content"> Six </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab7" /> <label for="tab7">Seven</label> <div id="tab-content7" class="content"> Seven </div> </li> </ul>

如果没有javascript，标签不会将容器包装在解决方案上

1 个答案: