Question

我面临一个奇怪的问题。我使用HTML模板，实际上只有一个页面中间有一个框。框的内容可以更改，您可以通过页面顶部的某些按钮导航到不同的版本。

我在着陆视图中添加了一个段落，当我移动到另一个视图并返回时，文本消失。

我可以看到问题不是它没有显示文本，问题是它完全消失并且只留下：

<div id="comment2" class="one-half"></div>

我无法弄清楚是什么原因造成的。

这是我的HTML：

<div id="content_wrapper">
    <div id="header"><span>Το <b>INTRO HALL</b> είναι το <b>TOP</b>!</span><div id="close"></div></div>
    <div id="content">
    <div class="scroll-pane">
        <div class="content" id="content1">
        <div id='subscribe_label'>Η ιστοσελίδα του γυμναστηρίου Intro Hall θα ανοίξει σε:</div>
        <div id="counter"></div><div class="clear"></div>
        <div class="form_title"><h1>Κέρδισε ένα δώρο!</h1></div>
        <div class="column_cont">
        <div id="comment2" class="one-half"><p>Συμπλήρωσε τη διπλανή φόρμα για να μπεις στο Club Επικοινωνίας του Intro Hall και κέρδισε ένα δώρο. Απλά γράψε το όνομα και το email σου και κλίκαρε 'Στείλτε το δώρο μου!'.</p></div>
            <!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" class="one-half" style="float:right;">
<form action="http://topgreekgyms.us6.list-manage2.com/subscribe/post?u=d6acf8949532b107b7b21c9d0&amp;id=e2131451dc" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div class="mc-field-group">
    <input type="text" value="" name="FNAME" class="required" id="firstname" placeholder="Όνομα">
</div>

<div class="mc-field-group" style="margin-bottom:4px;">
    <input type="email" value="" name="EMAIL" class="required email" id="primaryemail" placeholder="Email" style="float:right;">
</div>

    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>  

    <div class="clear"><input type="submit" value="ΣΤΕΙΛΤΕ ΤΟ ΔΩΡΟ ΜΟΥ!" name="subscribe" id="mc-embedded-subscribe" class="button_link hover_fade large_button red"></div>
</form>
</div>

<!--End mc_embed_signup-->
</div>          
</div>

这是CSS

#content_wrapper {
        position:absolute;
        width:506px;
        height:506px;
        z-index: 1000;
        top:0;
        left:0;
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(62, 62, 62);
        /* RGBa with 0.6 opacity */
        background: rgba(0, 0, 0, 0.52);
}

#header {
        width:506px;
        height:47px;
        background: #161616;
}

#header span {
    display:block;
    margin:auto;
    height: 100%;
    line-height: 47px;
    width:447px;
    color: #ffffff;
    padding: 0px 29px 0 29px;
    background: #ac0003;
    text-align:center;
    font-family: arial;
    font-size: 23px;
    text-transform: none;
    word-spacing: 5px;
}

#content {
    width: 502px;
    height: 306px;
    border: 2px solid #161616;
    border-width: 0 2px 0 2px;
    margin-top:-15px;
    padding-top:15px;
}

.content {
        display:none; 
        width: 458px;
}

#close {
    position: absolute;
        top:11px;
        right:12px;
        background: transparent url(../img/close.png) no-repeat;
        width:25px;
        height: 25px;
        cursor: pointer;
        display:none;
}

.column_cont {
    margin: 0 -15px 0 0px;
    clear:both;
}

.clear {clear:both;}

#comment2 {
color: #fff;
display:block;
font-size: 16px;
text-align: justify;
line-height: 20px;
margin-bottom:10px;
}

.one-half, .one-third, .two-third, .one-fourth,  .three-fourth {
    margin:0 5px 0 15px;
    float:left;
}

.one-half {
    width:206px;

}

此外，这是网站的link。

提前感谢您的任何帮助或意见！

Answer 1

在big_countdown.js文件中，关闭按钮上有一个包含document.getElementById('comment2').innerHTML = "";的监听器：

$("#close").click(function() {
        $('.content').each(
            function() {
                $(this).fadeOut('fast');
            });
        $('#content1').stop().fadeIn('fast');
        $("#close").css('display','none');
                $('#dots div').each(
            function() {
                $(this).removeClass('dot_active');
            });
        $("#dot1").addClass('dot_active');
        window.setTimeout(function() {
         api.reinitialise();
        },300);

        // Remove this line below
        document.getElementById("comment2").innerHTML="";
});

删除最后一行应解决问题。

Answer 2

使用优秀的JavaScript调试器可以帮助您在下次快速解决这个问题。 Firebug，Fixfox的加载项是最好的之一。要获得与albertxing相同的答案，您可以执行以下步骤：

加载页面
右键单击正在消失的元素，然后选择“使用Firebug检查元素”
您的
元素将在Firebug的HTML查看器中突出显示
右键单击此元素并选择“中断元素删除”
切换网页底部的按钮，使
元素消失
Firebug将检测到更改并立即将您带到导致其更改的代码行。

的Presto！

当我返回页面时，<p>中的内容消失了</p>

2 个答案: