0

我有一个 HTML 页面，我正在其中创建拼贴制作器和 FB 封面制作器。

我的页面中有两个选项卡，分别为它们放置了画布。我有一个用于拼贴制作者的单独脚本和另一个用于 FB 封面制作者的脚本。

问题：每当我切换标签时，我希望脚本分别启用/禁用。

这是我的标签代码。

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#tab1" data-toggle="tab">Collage Maker</a></li>
        <li><a href="#tab2" data-toggle="tab">FB Cover</a></li>
        <li><a href="#tab3" data-toggle="tab">Help</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1">
            <!--canvas-->
            <div id="canvas-container" class="canvas-container">
                <canvas id="c" width="1024" height="768" style="left: -300px; border: 1px dotted;"></canvas>
            </div>
            <!--Buttons-->
            <input type='file' id='fileElem' multiple accept="image/*" style="display: none" onchange="handleFiles(this.files)" />
            <input type='file' id='upload' accept="image/*" style="display: none" onchange="handleFiles(this.files)" />
            <input type="button" class="button button-small" onclick="convertCanvasToImage()" value="Create Collage" />
            <input type="button" id="setBackgrnd" class="button button-small" value="Set Background" onclick="setBackgrnd();" />
            <input type="button" id="delBackgrnd" class="button button-small" value="Delete Background" onclick="delBackgrnd();" />
            <input type="button" id="clear" class="button button-small" value="Reset Canvas" onclick="clearCanvas();" />
            <input type="button" class="button button-small" id="add-text" value="Add Text" style="margin-bottom: 5px;"><i class="icon-plus icon-white"></i>
        </div>
        <div class="tab-pane fade in" id="tab2">
            <div class="canvasbox" style="margin: 0 auto; width: 850px; min-height: 315px; border: 1px solid #ccc; margin-top: 10px; margin-bottom: 10px;">
                <canvas id="FBCanvas" width="850" height="315"></canvas>
            </div>
        </div>
        <div class="tab-pane fade in" id="tab3">
           HELP   
        </div>
    </div>
</div>
4

2 回答 2

2

尝试这个

看到这个文件

和选项卡的事件部分

它是引导选项卡

shown =>    This event fires on tab show after a tab has been shown. 
            Use event.target and event.relatedTarget to target the active tab 
            and the previous active tab (if available) respectively.

喜欢

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})
于 2013-08-13T12:32:50.423 回答
0

如果我理解你的问题...

您可以将 Id 添加到“a”标签并将布尔变量添加到您的脚本。

<a id="btn1" href="#tab2" data-toggle="tab">
<a id="btn2" href="#tab3" data-toggle="tab">

你的脚本可以...

var execute;    
$("#btn1").click(function(){execute = false;});
$("#btn2").click(function(){execute = true;});
$('a[data-toggle="tab"]').on('shown', function (e) {
     if(execute){................}
});
于 2013-08-13T12:42:12.923 回答