javascript - Wordpress + JQuery UI Tabs + 动态改变标签宽度

Question

我正在尝试在 WordPress 网站的其中一个页面上设置选项卡式 Pane (通过 jQuery)。我的选项卡可以正常工作，并且在大多数情况下，它看起来像我在这个阶段想要的那样。但是有一个问题 - 设置选项卡的宽度，使每个选项卡的跨度足够长，所有选项卡的总和等于 Pane 的空间。现在这通常不会太难，但问题是我不知道最后会有多少个标签(我的客户不确定)。

这是我通过 Jetpack 的自定义 CSS 功能使用的 CSS:

.ui-tabs-nav {
    font-size: larger;
    font-weight: bold;
    background: none;
    height: 30px;
/*To stop nav block scaling of tab size*/
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
    border: none;
    background: none;
}

.ui-tabs .ui-tabs-nav li {
    display: inline;
    border: none;
    margin: 0 0 -5px;
    background: none;
}

.ui-tabs-anchor {
    color: #000034;
}

ul.ui-widget-header, ul.ui-widget-content, ul.ui-state-default, ul.ui-state-hover {
    background: none;
    border: none;
}

.ui-tabs-active a {
    text-decoration: none;
    background: none;
    color: #222222;
    position: relative;
    z-index: 5;
}

还有一些javascript来调整标签的宽度:

jQuery(document).ready(function($) {
        var numTabs = $('#tabs li').length;

        var tabWidth = 100 / numTabs;
        var tabPercent = tabWidth + "%";

        var liArray = $('#tabs li');

    var i;

    for (i = 0; i < liArray.length; i++) {
        liArray[i].style.width = tabPercent;
    }
});

最后，一些 HTML:

<div id="tabs">
<ul class="ui-widget-header ui-corner-top">
    <li><a href="#tabs1">First</a></li>
    <li><a href="#tabs2">Second</a></li>
    <li><a href="#tabs3">Third</a></li>
</ul>
<div id="tabs1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

是的，考虑到这些片段 - 我如何使用 Javascript 将样式动态应用到我的选项卡，以便它们的总宽度 = Pane 的 100%？

谢谢!

Answer 1

将 li 更改为 block 元素，以便您可以设置其宽度。

jQuery(document).ready(function($) {
    $("#tabs").tabs();

    var numTabs = $('#tabs li').length;
    var tabWidth = 98 / numTabs; // using 98 because sometimes using 100 will cause last element to get "bumped" down below the first element.
    var tabPercent = tabWidth + "%";

    $('#tabs li').each(function () {
        $(this).css("width", tabPercent);
        $(this).css("display", "inline-block");
    });
});

http://jsfiddle.net/bwzhLzco/1/