ポップアップ内に 3 つのタブがあります。どのハイパーリンクがクリックされるかによって、特定のタブをアクティブにするために移動したいと思います。
必須ではないコードをすべて取り除いたので、ハイパーリンクに「ui-btn」クラスが適用されていると失敗するようです。リンクのスタイルが設定されていない場合は、正常に機能します。 正しいタブが選択されますが、ナビゲーション バーのリンクがアクティブ/強調表示されません。
誰もこれに光を当てることができますか? または簡単な回避策。
JSFiddleデモをご覧ください
HTML
<div data-role="popup" id="CC_dayformPopup" data-history="false" data-dismissible="false">
<main class="ui-content">
<form action="" method="post" id="CC_dayform" data-ajax="false">
<div data-role="tabs" id="tabs">
<div data-role="navbar">Type:
<ul>
<li><a href="#CC_OO_tab" data-ajax="false" id="CC_OO_tab_link">OO</a></li>
<li><a href="#CC_CLO_tab" data-ajax="false" id="CC_CLO_tab_link">CLO</a></li>
<li><a href="#CC_DO_tab" data-ajax="false" id="CC_DO_tab_link">DO</a></li>
</ul>
</div>
<div id="CC_OO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="OO_req" id="CC_OO_req" />
<label for="CC_OO_req">OO</label>
</fieldset>
</div>
</div>
<div id="CC_CLO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="CLO_req" id="CC_CLO_req" />
<label for="CC_CLO_req">CLO</label>
</fieldset>
</div>
</div>
<div id="CC_DO_tab">
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="DO_req" id="CC_DO_req" />
<label for="CC_DO_req">DO</label>
</fieldset>
</div>
</div>
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-mini">
<button type="submit" form="CC_dayform">Save</button>
<a href="#" data-rel="back" onclick="document.getElementById('CC_dayform').reset();" class="ui-btn ui-corner-all ui-shadow ui-btn-a">Cancel</a>
</fieldset>
</form>
</main>
</div>
These don't work...
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" class="ui-btn ui-btn-a ui-btn-inline">OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');" class="ui-btn ui-btn-a ui-btn-inline">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');" class="ui-btn ui-btn-a ui-btn-inline ">DO Chosen</a>
As they're 'ui-btn'
<br />
These work--><a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','on','','');" >OO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','on','');">CLO chosen</a>
<a href="#CC_dayformPopup" data-rel="popup" data-transition="pop" onclick="editDayform('1','','','on');">DO Chosen</a> as they have no 'ui-btn'
Jクエリ
function editDayform(day, OO, CLO, DO) {
if (OO == 'on') {
$('#CC_OO_tab_link').trigger('click');
} else if (CLO == 'on') {
$('#CC_CLO_tab_link').trigger('click');
} else if (DO == 'on') {
$('#CC_DO_tab_link').trigger('click');
}
if (OO == 'on') {
$('#CC_OO_req').prop('checked', true).checkboxradio('refresh');
}
if (CLO == 'on') {
$('#CC_CLO_req').prop('checked', true).checkboxradio('refresh');
}
if (DO == 'on') {
$('#CC_DO_req').prop('checked', true).checkboxradio('refresh');
}
return true;
}