問題描述
Nội dung từ
biến mất khi tôi quay lại trang (Content from
disappears when I return to the page)
I'm facing a strange problem. I use a HTML template and it's actually only one page with a box in the middle. The content of the box can change and you navigate to the different version by some buttons at the top of the page.
I have added a paragraph in the landing view and when I move to another view and return back the text disappears.
I can see that the problem isn't that it doesn't show the text, the problem is that it completely disappears and only leaves:
<div id="comment2" class="one‑half"></div>
I cannot figure out what causes it though.
Here's my 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&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>
And here's the 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;
}
Also, here's a link to the website.
Thanks in advance for any help or opinions!
參考解法
方法 1:
In your big_countdown.js file, there is a listener on the close button which contains 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="";
});
Removing this last line should solve the problem.
方法 2:
Using a good JavaScript debugger can help you figure this out really quickly next time. Firebug, an add‑in to Fixfox is one of the best. To get to the same answer as albertxing you can do the following steps:
- Load the page
- Right click on the element that is disappearing and select "Inspect element with Firebug"
- Your
element will be highlighted in Firebug's HTML viewer
- Right‑click on on this element and select "break on element removal"
- Toggle the buttons at the bottom of your web page to make the
element disappear
- Firebug will detect the change and take you immediately to the line of code that caused it to change.
Presto!
(by kat_indo、Albert Xing、Matt Wielbut)