javascript - jQuery toggle() 错误

Question

我有一个使用选项卡界面设置的页面。单击选项卡时，将调用以下函数:

function DisplayContent(tabname, newobject) //for displaying the content in the tabs
{
    document.getElementById("display").innerHTML = document.getElementById(tabname).innerHTML; //writing from a hidden div on the same page
    if(!newobject) newobject=document.getElementById('tab'+tabname);
    if(lastobject) lastobject.className='';
    newobject.className='selected';
    lastobject=newobject;
}

我在按钮中使用以下函数来切换页面上的某些元素:

onclick="$('.duedate').toggle();"

如果我根本不点击按钮，一切都很好。但是，如果我单击按钮显示隐藏的内容，然后重新隐藏内容，当我更改选项卡时会出现问题 - 当我再次返回该选项卡时，内容会恢复显示。为什么这些元素再次出现，即使我没有点击按钮？希望我说得有道理，这是一个很难描述的问题。

Answer 1

因为您要从 dom 中删除隐藏的元素并用新的 HTML 替换它们。如果要保留样式，还必须保留元素。使用 .show()和 .hide()显示您的 div，而不是复制 html。

function DisplayContent(tabname, newobject) //for displaying the content in the tabs
{
    $("tabContent").hide();  // hide all the tab content divs
    $("#" + tabname).show(); // show just the current tab's content div 
    if(!newobject) newobject=document.getElementById('tab'+tabname);
    if(lastobject) lastobject.className='';
    newobject.className='selected';
    lastobject=newobject;
}

为此，请为您的所有内容 div 提供一个类“tabContent”，并将它们放在您的 <div id="display"></div> 之后。 .