Question

使用Squelch标签插件（http://wordpress.org/support/plugin/squelch-tabs-and-accordions-shortcodes），此代码会在标签中添加一个图标而不是标题。

使用图标添加标题后，标题将移动到图像的右侧而不是下方。如何让标题直接显示在图像下方而不是分流到侧面？

这似乎不是一个CSS问题，但如果你这么认为我会发布css。

// Build the tab
$rv  = '';
$rv .= '<li class="squelch-taas-tab">';
$rv .= '<a href="#squelch-taas-tab-content-'.$taas_current_tab_group.'-'.$taas_tab_content_counter.'">';

if (!empty($atts['icon'])) {
    if (empty($atts['iconalt'])) $atts['iconalt'] = $atts['title'];

    $rv .= '<img src="'.$atts['icon'].'" alt="'.$atts['iconalt'].'" class="squelch-taas-tab-icon" ';

    if (!empty($atts['iconw'])) $rv .= 'width="'.$atts['iconw'].'" ';
    if (!empty($atts['iconh'])) $rv .= 'height="'.$atts['iconh'].'" ';

    $rv .= '/> &nbsp;';
}

$rv .= $atts['title'];
$rv .= '</a>';
$rv .= '</li>';
$tab_arr['tab'] = $rv;

css（来自jquery-ui-1.9.2.custom.css的第一部分，来自静噪标签css的标签部分）：

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 0 0 0; border-bottom: 1px; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }

/* Tabs */
.squelch-taas-tab-group .ui-tabs-panel:after {
content: ".";
display: block;
height: 180px;
line-height: 0;
clear: both;
visibility: hidden;
zoom: 1;
}

短码：

[tabs title="The Team" disabled="false" collapsible="true" active="0" event="click"]
[tab icon="example.jpg" title="Tab Title 1"]

html：

<h2 id="squelch-taas-title-0" class="squelch-taas-group-title">The Team</h2>
<div id="squelch-taas-tab-group-0" class="squelch-taas-tab-group" data-title="The Team" data-disabled="false" data-collapsible="true" data-active="0" data-event="click">
<ul>
    <li class="squelch-taas-tab">
        <a href="#squelch-taas-tab-content-0-0">
            <img src="http://www.example.com/image1.jpg" class="squelch-taas-tab-icon" /> &nbsp;Tab Title 1</a>
    </li>
</ul>
... </div>

Answer 1

好的，简单的解决方案，事实证明。此行$rv .= '/>  ';需要更改为$rv .= ' /><br />';

jQuery选项卡ui不会组合标题和图标

1 个答案: