静态页面保存状态

今天上铺给了一个比较特殊的需求，对于一些js执行的行为能保存下来，如果直接使用浏览器是可以通过history回退来实现的。但是，他使用的软件，并不是浏览器，每次都会通过url来获得！

也就是，后退后，又是初始的状态，相当于重新加载了一次页面！

 

如果能够像jsp那样，可以接受一个参数就ok了！这样就可以通过url来记录状态了。

 

依赖：

html_runexe[www.greenhua.com]

https://github.com/allmarkedup/jQuery-URL-Parser

 

实现：

这里通过增加一个参数来完成。

 

<style>
.box {border:1px dashed blue;padding:5px; list-style:none;font-size:16px; font-family:"黑体"; line-height:60px }
p{margin:0; border:0; padding:0; line-height:1em}
.detail{display:none}
</style>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/purl.js"></script>

<script type="text/javascript">

$(document).ready(function(){
  var catalog = $.url().param('catalog');
  if ( typeof(catalog) === 'undefined'){
	  catalog=1;
  }
				   
  $(".detail").hide();
  $("#detail_" + catalog).show();
});

function menu(catalog){
	location.href = "?catalog="+catalog;
}

</script>

 

<div class="box">
<li>
<span><a  href="#" οnclick="menu(1)" id="catalog_1">01-01</a></span>
<span><a  href="#" οnclick="menu(2)" >02-02</a></span>
<span><a  href="#" οnclick="menu(3)" >03-03</a></span>
<span><a  href="#" οnclick="menu(4)" >04-04</a></span> </li>
    
<li>
<span><a  href="#" οnclick="menu(5)" >05-05</a></span>
<span><a  href="#" οnclick="menu(6)" >06-06</a></span>
<span><a  href="#" οnclick="menu(7)" >07-07</a></span>
<span><a  href="#" οnclick="menu(8)" >08-08</a></span>	</li>
    
<p class="detail" id="detail_1">1</p>
<p class="detail" id="detail_2">2</p>
<p class="detail" id="detail_3">3</p>
<p class="detail" id="detail_4">4</p>
<p class="detail" id="detail_5">5</p>
<p class="detail" id="detail_6">6</p>
<p class="detail" id="detail_7">7</p>
<p class="detail" id="detail_8">8</p>
    
</div>

 

--v2--

<script type="text/javascript">

$(document).ready(function(){

  var catalog = $.url().param('catalog');
				   
  if ( typeof(catalog) === 'undefined'){
	  catalog=1;
  }
				   
  $(".detail").hide();
  
  var ccatalog = $("#catalog_" + catalog);
  ccatalog.css("background","blue");
  ccatalog.css("color","#FFF");
  
  $("#detail_" + catalog).show();
  
});

function menu(catalog){
	location.href = "?catalog="+catalog;
}

</script>