У вас есть вкладка и 5 вкладок для показа содержимого и 1 вкладка для печати страницы, как использовать кнопку печати только для onclick без обновления страницы.
<div id="maintab">
<ul>
<li><a href="#HATPRO">HATPRO</a></li>
<li><a href="#summary">Summary</a></li>
<li><a href="#modules">Module List</a></li>
<li><a href="#computer">Computer Infrastructure</a></li>
<li><a href="#all">All (Raw Data)</a></li>
<li class="myTab"><a href="#" onclick="printData()">Print</a></li>
</ul>
$("#maintab").tabs();
И 5 div
<div class="ui-widget-content"
<div class="ui-widget-content"
<div class="ui-widget-content"
<div class="ui-widget-content"
<div class="ui-widget-content"
ОБНОВЛЕНИЕ 1
Извините за все решения, но он не работает, потому что он помещает все содержимое всех вкладок в текущую вкладку при нажатии кнопки печати
UPDATE 2 Я добавил ui-widget-content для вкладки print. Теперь он показывает пустую страницу
Хм, я просто добавил простую кнопку
var textElement = $("<span></span>");
textElement.append('<button id="printBtn" onclick="window.print(); return false;">Print</button>')
textElement.css('position', 'absolute');
textElement.css('right', '20px');
textElement.css('top', '5px');
$("#maintab").append(textElement);
Но это уродливое решение :( Спасибо всем за усилия, если есть какие-то разные решения, просто напишите или прокомментируйте :)
Добавьте это в свой код jquery
$(".myTab a").click(function(e){
e.stopPropagation();
});
Есть много способов приблизиться к этому. На мой взгляд, это самый элегантный, потому что он не требует какого-либо JQuery или каких-либо модификаций вашей функции printData().
+ Изменить
<a href="#" onclick="printData()">Print</a>
в
<a href="#" onclick="printData(); return false;">Print</a>
Возврат false приведет к тому, что страница перестанет обновляться, поскольку событие никогда не начнет всплывать.
onclick
выполнитеevent.preventDefault()