Question

我正在使用tampermonkey / Greasemonkey脚本将我自己的用户脚本添加到网页中，我希望在设置页面中添加一个额外的标签。这些选项卡最初是使用jQuery UI选项卡构建的（在页面加载时）。我遇到的问题是，当我尝试自己调用相同的标签功能来轻松添加标签时，它们似乎无法正常工作。事实上，他们似乎什么都不做，没有任何错误。

这似乎是建立标签的所有相关代码（在单独的CSS文件中建立类。

<script>
    $(function() {
        $("#optionTabs").tabs();
        $("#optionTabs").tabs('select', 0);
        $("#optionTabs").css("display", "block");
    });
</script>

<div id="optionTabs" style="display: block;" class="ui-tabs">
    <ul class="ui-tabs-nav">
        <li class="ui-state-default ui-tabs-selected">
            <a href="#optionTabs-1">Gameplay</a>
        </li>
        <li class="ui-state-default">
            <a href="#optionTabs-2">User Interface</a>
        </li>
        <li class="ui-state-default">
            <a href="#optionTabs-3">NEW TAB</a>
        </li>
    </ul>   

    <div id= "optionTabs-1" class="ui-tabs-panel">
        content
    </div>
    <div id= "optionTabs-2" class="ui-tabs-panel ui-tabs-hide">
        some content
    </div>
    <div id= "optionTabs-3" class="ui-tabs-panel ui-tabs-hide">
        MY CONTENT
    </div>
</div>

我尝试使用以下代码，但没有成功：

$('div #optionTabs ul').append('<li class="ui-state-default"><a href="#optionTabs-3">NEW TAB</a></li>')
$('div #optionTabs').append('<div id="optionTabs-3" class="ui-tabs-panel ui-tabs-hide">MY CONTENT</div>')
$('#optionTabs').tabs('refresh')

前两行效果很好; div和ul正确添加，我可以在HTML中看到它。但是，我实际上无法单击选项卡并让它工作。我已经提出了工作的解决方法，但我觉得有更简单，更有效的方法来做我正在做的事情（忽略jquery选择器的明显减少）：

$('[href = "#optionTabs-3"]').parent().on('click', function(){
    $('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page
    $('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content
    $('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active

})
$('[href *="optionTabs-"').not('#optionTabs-3').on('click', function(){
    $('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide');
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive
})

同样，虽然这有效，但我不知道为什么我看到的更简单的方法（即附加一些内容和刷新标签而不是定义我自己的事件处理程序）在这里不起作用。我认为它可能与Tampermonkey / Greasemonkey的沙盒有关，但我不确定。有人可以赐教我吗？

编辑：我认为如果我尝试使用unsafeWindow，我可能会让这个工作，虽然我不想出于各种原因，首先是安全。

Answer 1

尝试.live而不是.on

$('[href = "#optionTabs-3"]').parent().live('click', function(){
    $('div [id*="optionTabs-"]').not('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide'); //hide current page
    $('#optionTabs-3').attr('class', 'ui-tabs-panel'); //display my content
    $('[class*="ui-state-default ui-tabs-selected"').attr('class','ui-state-default'); //make current active tab normal
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default ui-tabs-selected'); //make my tab look active

})
$('[href *="optionTabs-"').not('#optionTabs-3').live('click', function(){
    $('#optionTabs-3').attr('class', 'ui-tabs-panel ui-tabs-hide');
    $('[href="#optionTabs-3"]').parent().attr('class', 'ui-state-default'); //make my tab look INactive
})

使用Userscript添加jQuery选项卡

1 个答案: