Question

我有一个页面上有三个标签，每个标签都有不同的内容。我也有一个带有选择和按钮的div。我希望这个div显示在前两个选项卡上但不显示在第三个选项卡上。我知道一个选项就是复制两个选项卡上的内容，但是我必须保持他们的数据与javascript同步，我觉得必须有一个比这更好的解决方案。

所以我尝试将div放在定义选项卡的位置和选项卡内容开始的位置之间，这样可以正常工作，但它会在所有三个选项卡中显示。在javascript中，我尝试将点击事件绑定到选项卡按钮

$("#pushingInfoTabButton").click(function () {
        $("#addInspection").show();
});
$("#pushingInspTabButton").click(function () {
        $("#addInspection").show();
});
$("#pushingGridTabButton").click(function () {
        $("#addInspection").hide();
});

并在两个标签中显示div并隐藏第三个标签，但在将debugger放入点击事件后，它们永远不会触发。是否有一种更简单的方法可以做到这一点，我只是不知道？

这是相应的HTML。很抱歉一开始没有。

        <div data-role="tabs" class="ui-content insetContent infoContent" >
            <div data-role="navbar">
                <ul>
                    <li><a id="pushingInfoTabButton" href="#pushingInfoTab" data-theme="a">Info</a></li>
                    <li><a id="pushingInspTabButton" href="#pushingInspTab" data-theme="a">Insp</a></li>
                    <li><a id="pushingGridTabButton" href="#pushingGridTab" data-theme="a">Grid</a></li>
                </ul>                
            </div>
            <div id="addInspection">
                <div class="ui-block-a" style="width:30%;margin-right:0px;">
                    <a data-role="button" data-inline="false" data-theme="b"  style="padding-left:0px; padding-right:0px;" id="A1">Add</a>
                </div>
                <div class="ui-block-b" text-align:right" style="width:70%; margin-left:0px;">
                    <select data-inline="true"  data-native-menu="true">
                        <option value=""  id="Option1">Select</option>
                    </select>
                    <a data-role="button" data-inline="true" data-theme="g"  style="margin-left:-7px;" id="A2">Clr</a>
                </div>
            </div>
            <div id="pushingInfoTab" class="ui-content insetContent infoContent">

            </div>
            <div id="pushingInspTab" class="ui-content insetContent infoContent">

            </div>
            <div id="pushingGridTab" class="ui-content insetContent infoContent">

            </div>

注意：没有把任何内容实际放在标签中，因为它有数百行不必要的标记，我不认为这是问题。

Answer 1

这里有一个拼写错误：

text-align:right" style="wi

然后，将JS放在正文的底部，或者放在jQuery Document Ready。

这是working demo。

如何在两个不同的jquery选项卡中进行div显示而不是第三个？

1 个答案: