Question

我有一个已经有效的纯CSS解决方案解决方案。现在我的解决方案的缺点是，由于实际选项卡的绝对定位，下面的内容元素需要使用margin-CSS规则进行移动。

这导致了两个主要问题：

1）如果每个选项卡中的内容量不同，那么如果选择内容较少的选项卡，则该选项卡下方会出现“不必要的”空白。

2）如果您将网站的大小调整为较小的尺寸，则元素可能会重叠。

我更喜欢没有任何javascript或jQuery的解决方案，但这不是强制性的。

我的意思是：查看我网站上的两个标签组： http://alexander-pastor.de

这个例子的缺点变得更加明显：

1）在标签选项卡中选择一个标签。

2）将窗口调整为更小的尺寸并向下滚动。

这是标记和css规则：

编辑：不要介意他们来自我的CMS的插入标签。

标记

<div id="blog-wrapper">

    <div id="blog-left">
        <div id="blog-news">
            {{insert_module::55}}
        </div>
    </div>

    <div id="blog-right">
        <ul class="tabs" style="margin-bottom:260px;">
            <li>
                <input type="radio" name="tabs" id="tab1">
                <label for="tab1">
                    <span class="fa fa-gear"></span> 
                    <span class="tab-text">Tools</span>
                </label>
                <div id="tab-content1" class="tab-content">
                    {{insert_article::blog-tools}}
                </div>
            </li>

            <li id="blog-authorization">
                <input type="radio" name="tabs" id="tab2" checked>
                <label for="tab2">
                    <span class="fa fa-user"></span> 
                    <span class="tab-text">Mein Account</span>
                </label>
                <div id="tab-content2" class="tab-content">
                    {{insert_article::blog-authorization}}
                </div>
            </li>
        </ul>

        <br style="clear:both">

        <ul class="tabs" style="margin-bottom:1000px;">
            <li>
                <input type="radio" name="tabs2" id="tab3" checked>
                <label for="tab3">
                    <span class="fa fa-tag"></span>
                    <span class="tab-text">Tags</span>
                </label>
                <div id="tab-content3" class="tab-content">
                    <p class="reset">
                        <a href="blog.html">gewählte Tags zurücksetzen</a>
                    </p>
                    {{insert_module::60}}
                    <!-- TAGCLOUD -->
                </div>
            </li>

            <li id="blog-archive">
                <input type="radio" name="tabs2" id="tab4">
                <label for="tab4">
                    <span class="fa fa-archive"></span>
                    <span class="tab-text">Archiv</span>
                </label>
                <div id="tab-content4" class="tab-content">
                    {{insert_module::58}}
                </div>
            </li>

            <li>
                <input type="radio" name="tabs2" id="tab5">
                <label for="tab5">
                    <span class="fa fa-star"></span>
                    <span class="tab-text">Empfohlen</span>
                </label>
                <div id="tab-content5" class="tab-content">
                    {{insert_article::blog-featured}}
                </div>
            </li>
        </ul>       
        <br style="clear:both">
    </div>  

</div>

CSS：

.tabs {
    display: block;
    list-style: none;
    position: relative;
    top:-10px;
    margin: 0 0 0 10px;
    padding-left:0;
    text-align: left;
}

.tabs li {
  display: inline-block;
}

.tabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}

.tabs label {
  display: block;
  padding: 14px 21px;
  border-radius: 5px 5px 0 0;
  margin: 0 5px 0 0;
  font-size: 16px;
  background: rgba(220, 240, 255, 0.3);
  cursor: pointer;
  position: relative;
  top: 6px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.tabs label:hover {
  background: rgba(0, 126, 220, 0.3);
}

.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 25px; 
  position: absolute;
  top: 53px;
  left: 0;
  background: rgba(169, 218, 255, 0.3);
  border-radius:0 5px 5px 5px;
}

.tabs [id^="tab"]:checked + label {
  background: rgba(169, 218, 255, 0.3);
}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

Answer 1

虽然我更喜欢一些纯CSS解决方案，但这里是我的问题的jQuery解决方案：

jQuery dynamic margin for tabs

纯CSS标签：绝对定位

1 个答案: