WordPress + JQuery UI 选项卡 + 动态更改选项卡的宽度

Wordpress + JQuery UI Tabs + Dynamically changing Width of Tabs

本文关键字：选项 动态 UI WordPress JQuery      更新时间：2023-09-26

我正在尝试在WordPress站点的一个页面上设置一个选项卡式窗格（通过jQuery）。我有选项卡工作，在大多数情况下，它看起来在这个阶段是我想要的。不过有一个问题 - 设置选项卡的宽度，以便每个选项卡的跨度足够长，以至于所有选项卡的总和都等于窗格的空间。现在这通常不会太难，但问题是我不知道最终会有多少个选项卡（我的客户不确定）。

以下是我通过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 将样式动态应用于我的选项卡，以便它们的所有宽度组合 = 窗格的 100%？

谢谢！

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

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/

相关文章：