Question

我试图在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％？

谢谢！

Answer 1

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

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

1 个答案: