У меня есть страница с тремя вкладками на ней, каждая с различным содержанием. У меня также есть div с кнопкой выбора и кнопкой. Я бы хотел, чтобы этот div отображался на первых двух вкладках, но не на третьем. Я знаю, что одним из вариантов было бы просто дублировать содержимое на обеих вкладках, но тогда мне пришлось бы синхронизировать их данные с javascript, и я чувствую, что должно быть лучшее решение, чем это.Как получить div-шоу в двух разных вкладках jquery, но не в третьем?
Итак, я попытался поместить 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>
Примечание: Не ставить какие-либо содержание, что на самом деле в закладках, потому что это сотни строк ненужной разметки, и я не думаю, что это проблема.
Нам нужно будет увидеть соответствующий код HTML. –
@JeremyThille добавлен. Извините, я понял, что вопрос достаточно простой, HTML не нужен. –
@WashingtonGuedes, как бы я использовал это в этой ситуации? Я использовал его раньше для отдельных ящиков, но я не знаю, как это будет актуально здесь. –