標簽為按鈕的jQuery UI

Question

有用於顯示內容的選項卡和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

抱歉，所有解決方案都無法使用，因為單擊“打印”按鈕時會將所有標簽的所有內容都放到當前標簽中

更新2我為打印選項卡添加了ui-widget-content。 現在顯示空白頁

Answer 1

將此添加到您的jQuery代碼

$(".myTab a").click(function(e){
    e.stopPropagation();
});

Answer 2

有很多方法可以解決此問題。 我認為這是最優雅的方法，因為它不需要任何JQuery或對printData（）函數的任何修改。

更改

<a href="#" onclick="printData()">Print</a>

至

<a href="#" onclick="printData(); return false;">Print</a>

返回false將阻止頁面刷新，因為該事件永遠不會冒泡。

Answer 3

嗯，我剛剛添加了簡單的按鈕

 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);

但這是丑陋的解決方案：（感謝大家的努力，如果有其他解決方案，請發表或評論：）