标签的jQuery动态边距 [英] jQuery dynamic margin for tabs

问题描述

现在，我有了一些简洁的纯CSS选项卡.不幸的是，我的实现有一个严重的缺点，那就是实际的制表符内容必须绝对定位.为了解决这个问题，我需要根据.tab-content的高度，使父元素.tabs具有动态边距-bottom-bottom.

Right now I have got some neat pure CSS tabs. Unfortunately my implmentation has the serious drawback of the actual tab-content being absolutely positioned. In order to fix this i need the parent element .tabs to have a dynamic margin-bottom depending on .tab-content's height.

这是我到目前为止尝试过的jQuery，它不起作用: (而且我不喜欢最近的()方法，在这种情况下看起来效率很低):

Here's the jQuery i tried so far, which doesn't work: (Also i don't like the closest()-method, looks pretty ineffecient in this context):

$(document).ready(function(){

    // Need some initial margin-bottom, don't like "manual" CSS-rules.
    // How to do this?

    $(".tabs label").on('click', tabMargin());

    // This does not work either.
    function tabMargin(){
        var x = $(this).closest(".tab-content").outerHeight(true);
        $(this).closest(".tabs").css('margin-bottom', x+20);
    }

});

如果有人在乎，这是标记:

If anyone cares here's the markup:

<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>

推荐答案

您无需指定():

$(".tabs label").on('click', tabMargin);

---

，而且您不应该使用.closest()，因为您要定位的元素是它的同级元素:

---

and also you should not use .closest() because the element you are targeting is the sibling of it:

function tabMargin(){
    var x = $(this).siblings(".tab-content").outerHeight(true); // use siblings here
    $(this).closest(".tabs").css('margin-bottom', x+20);
}

这篇关于标签的jQuery动态边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！