Question

有用于显示内容的标签和5个标签以及用于打印页面的1个标签，如何在不刷新页面的情况下使用打印按钮进行点击。

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

但这是丑陋的解决方案:( 感谢大家的努力，如果有任何不同的解决方案，只需发表或评论：）

选项卡作为按钮jquery ui

3 个答案: