Question

我的网站上有这些代码 HTML -

<ul class="tabs">
    <li>
      <input type="radio" checked name="tabs" id="tab1">
      <label for="tab1">Twitter</label>
      <div id="tab-content1" class="tab-content animated fadeIn">
<a class="twitter-timeline"  href="https://twitter.com/1THUGRadio" data-widget-id="521855935606583296">Tweets by @1THUGRadio</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">Facebook</label>
      <div id="tab-content2" class="tab-content animated fadeIn">
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fthugcommunity&width=650&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=500" frameborder="0" scrolling="yes" style="background: white; border: currentColor; border-image: none; width: 650px; height: 500px; overflow: visible; float: left;" allowtransparency="true">
</iframe>
      </div>
    </li>
</ul>

，因为你可以看到它有FB和Twitter提要

CSS

.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
.tabs {
    width: 650px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 75px auto;
  }
.tabs li{
    float: left;
  }
.tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      font-size: 24px;
      font-weight: normal;
      font-family: 'Lily Script One', helveti;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
.tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
  }

[id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }

[id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
.tab-content{
    z-index: auto;
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #08C;
    padding: 15px;
    color: white;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
.tabs {
    width: 650px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 75px auto;
  }
.tabs li{
    float: left;
  }
.tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      font-size: 24px;
      font-weight: normal;
      font-family: 'Lily Script One', helveti;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
.tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
  }

[id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }

[id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
.tab-content{
    z-index: 6;
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #08C;
position: relative;
    padding: 15px;
    color: white;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }
    animation-duration: 0.5s;
  }

当我把编码放在jfiddle.net时，一切都会显示出来。但是，当我将其放入网站时，只显示标签，而不是内容

Answer 1

首先，感谢我从大家那里得到的帮助。所以我发现它需要溢出：可见;没有隐藏。

TABBED内容没有出现在CSS中

1 个答案: