jQuery dynamic margin for tabs

问题

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.

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>

回答1:

You don't need to specify ():

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

---

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);
}

来源：https://stackoverflow.com/questions/29364822/jquery-dynamic-margin-for-tabs