Jquery UI选项卡，显示具有特定选项卡的外部div

Question

美好的一天，我很抱歉，如果这不是正确的问题，因为这是第一次发布在这里。

我想在点击或登陆特定标签时显示隐藏的外部div。我已经尝试了多次尝试但没有成功，并且尝试了多个具有相同结果的其他路线。

以下是我目前的情况：

<div id="external-div" style="display:none;"></div>
<div id="tabs">
        <ul class="top-nav">
                <li><a href="#tab1">Tab 1</a></li>
                <li><a href="#tab2">Tab 2</a></li>
                <li><a href="#tab3">Tab 3</a></li>
        </ul>
        <div id="tab1"></div>
        <div id="tab2"></div>
        <div id="tab3"></div>
</div>

Jquery的：

$("#tabs").tabs({
        activate: function (e, ui) {
            $('#external-div').toggle(ui.newPanel.is('#tab-1'))
        }
});

我从here获得了

基本上我需要的是 external-div 在点击或登陆 tab-1 时显示，并在 tab-2 <时隐藏/ strong>和 tab-3 被点击或直接登陆。问题是，按照当前的方式我只有当我点击另一个标签然后再返回时它才显示外部div。如果我删除“display：none;”

，如果我首先登陆它们（使用锚链接），它也将在其他选项卡上显示div

非常感谢！