javascript - jQuery 在浏览器刷新时返回页面

Question

我目前有一个包含文本的 div，并且文本在我的辅助导航(即 Owl 轮播)的单击功能上发生变化。

刷新页面后，我希望文本恢复到其原始的默认状态。我可以找到有关如何为 jQuery 创建刷新按钮的说明，但我不想使用按钮，只想使用浏览器中的刷新。我正在尝试做不可能的事吗？我可以使用什么样的脚本或代码来完成此任务？

以下是我尝试过的一些方法:

$(document).ready(function() {
$("div[data-role*='page']").live('pagehide', function(event, ui) {
          if ($(this).children("div[data-role*='content']").is(".command-no-cache"))
              $(this).remove();
});
});

另一次尝试:

$(document).ready(function() {
refresh = function (selector)
{
try
{            
$('#TextLeft').html('refresh'); 
}
catch (e) 
{
}
});

HTML 标记

 <div class="ImageRight">
 <img src="links/00-PlaceholderLarge.jpg"/>
 </div>

<div class="TextLeft">

<div class="headline">
    <img src="links/AboutUs.png"/>
 </div>

<div class="lineGreen"></div>

<div class="tabs">

<div id="about">    
<h3>Headline</h3>
<p>TEXT</p>
</div>

<div id="first">
<h3>Headline</h3>
<p>TEXT</p>
</div>

<div id="second">
<h3>Headline</h3>
<p>TEXT</p>
</div>

<div id="third">
<h3>Headline</h3>
<p>TEXT</p>
</div>    

</div>    
</div>
</div>

<div class="clearfix"></div>

<div id="Gray">
<div id="owl-demo" class="owl-carousel owl-theme">

<div class="ImageContainer Purple">
      <div id="PurpleColor">
          <h2>TITLE</h2> 
  </div>

            <div  class="photo grow">  
             <a href="#first" id="1">           
                <img src="links/AboutUs-IMG1.jpg" />
                </a>
            </div>

        <div class="ImageFooter" id="Purple">
          <p class="ImageContainerP">Headline</p>
        </div>
  </div>

<div class="ImageContainer Green">
        <div id="GreenColor">
          <h2>TITLE</h2>
        </div>

       <div class="photo grow">
          <a href="#second" id="2">
            <img src="links/AboutUs-IMG2.jpg"/>
          </a>
       </div>

        <div class="ImageFooter" id="Green">
          <p class="ImageContainerP">Headline</p>
  </div></div>

<div class="ImageContainer Blue">
        <div id="BlueColor">
          <h2>TITLE</h2>
        </div>

        <div class="photo grow">
        <a href="#third" id="3">
            <img src="links/AboutUs-IMG3.jpg"/>
            </a>
        </div>

        <div class="ImageFooter" id="Blue">
          <p class="ImageContainerP">Headline</p>
        </div>
  </div>

</div>
</div> 
</div>

Answer 1

如果没有所有代码，很难完全回答您的问题。如果你设置一个jsfiddle那就更容易了。不管怎样......我只是添加一个带有点击功能的类，该功能可以为您的文本添加必要的更改。如果该类不存在于 HTML 标记中并且仅在单击时由 JS 添加，则它不会出现在页面加载时。那应该可以解决你的问题。如果不确切知道您的点击功能的作用或有关您的页面的更多细节，我真的无法更具体。