当另一个人单击时隐藏选项卡内容

Question

我有一排选项卡，在页面加载时，第一个选项卡处于活动状态。但是，当我单击下一个或第三个选项卡时。单击的选项卡的 div 会加载到页面下方，因为选项卡 1 即使在不活动时也会占用空间。

我的 php 页面中控制选项卡的 javascript 是

echo '<script type="text/javascript">';
        echo 'jQuery(document).ready(function(){';
            echo 'jQuery("#tab'.$temp->id.' a:first").tab("show")';
            echo '});';
        echo '</script>';

删除 JavaScript 可以使选项卡正常工作，但选项卡在页面加载时不处于活动状态

Answer 1

您缺少实际切换选项卡可见性的部分。您仅将第一个选项卡设置为在页面加载时处于活动状态，但没有处理单击事件来隐藏其他选项卡。

echo '<script type="text/javascript">';
echo 'jQuery(document).ready(function(){';
echo '  jQuery("#tab'.$temp->id.' a:first").tab("show");';
echo '  jQuery("#tab'.$temp->id.' a").on("click", function() {';
echo '    jQuery("#tab'.$temp->id.' .tab-content").hide();';
echo '    var target = jQuery(this).attr("href");';
echo '    jQuery(target).show();';
echo '  });';
echo '});';
echo '</script>';

尝试一下，让我知道这是否有效