A页面
<!DOCTYPE html><html> ???<head> ???????<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> ???????<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script> ???????<style type="text/css"> ???????????*{margin: 0;padding: 0;} ???????????ul,li{ ???????????????list-style: none; ???????????} ???????????.box{ ???????????????width: 100%; ???????????????height: auto; ???????????????position: absolute; ???????????????left: 0; ???????????????right: 0; ???????????????bottom: 0; ???????????????top: 0; ???????????????margin: auto; ???????????} ???????????.box ul{ ???????????????width: 100%; ???????????????height: 500px; ???????????????margin: auto; ???????????????position: absolute; ???????????????left: 0; ???????????????top: 0; ???????????????right: 0; ???????????????bottom: 0; ???????????????background: #CCCCCC; ???????????} ???????????.box li{ ???????????????width: 80%; ???????????????text-align: center; ???????????????padding: 0 10%; ???????????????margin-bottom: 20px; ???????????????overflow: hidden; ???????????} ???????????.box li span{ ???????????????display: inline-block; ???????????????width: 40%; ???????????????height: 50px; ???????????????float: left; ???????????????line-height: 50px; ???????????????margin-right: 10%; ???????????????text-align: center; ???????????????background: greenyellow; ???????????????color: #fff; ???????????????font-size: 30px; ???????????} ???????????.box li span.active{ ???????????????background: #c0c; ???????????} ???????</style> ???</head> ???<body> ???????<div class="box"> ???????????<ul > ???????????????<li> ???????????????????<span class="item active" data-index=0>1</span> ???????????????????<span class="item" data-index=1>2</span> ???????????????</li> ???????????????<li > ???????????????????<span class="item" data-index=2>3</span> ???????????????????<span class="item" data-index=3>4</span> ???????????????</li> ???????????????<li> ???????????????????<span class="item" data-index=4>5</span> ???????????????????<span class="item" data-index=5>6</span> ???????????????</li> ???????????????<li> ???????????????????<span class="item" data-index=6>7</span> ???????????????????<span class="item" data-index=7>8</span> ???????????????</li> ???????????????????????????????<!--<li>1</li> ???????????????<li>2</li> ???????????????<li>3</li> ???????????????<li>4</li> ???????????????<li>5</li> ???????????????<li>6</li> ???????????????<li>7</li> ???????????????<li>8</li> ???????????????<li>9</li> ???????????????<li>10</li>--> ???????????????????????????</ul> ???????</div> ???????<script type="text/javascript"> ???????????$(function(){ ???????????????$(".item").click(function(){ ???????????????????$(this).addClass("active").siblings("span").removeClass("active") ???????????????????.parent("li").siblings().children(".item").removeClass("active") ???????????????????????????????????????$.cookie("activeIndex",$(this).data("index")); ???????????????????console.log($(this).data("index")) ???????????????????window.location.href = ‘cookieB.html?1‘ ???????????????}) ???????????????}) ???????????????????????????????????????????????????????</script> ???</body></html>B页面
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta charset="UTF-8"><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script><style type="text/css">*{margin: 0;padding: 0;}ul,li{list-style: none;}.box{width: 100%;height: auto;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}.box ul{width: 100%;height: 500px;margin: auto;position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: #CCCCCC;}.box li{width: 80%;text-align: center;padding: 0 10%;margin-bottom: 20px;overflow: hidden;}.box li span{display: inline-block;width: 40%;height: 50px;float: left;line-height: 50px;margin-right: 10%;text-align: center;background: greenyellow;color: #fff;font-size: 30px;}.box li span.active{background: #c0c;}</style></head><body><div class="box"><ul ><li class="aaa"><span class="item active" onclick="abc()">11</span><span class="item" >12</span></li><li class="aaa"><span class="item" onclick="abc()">13</span><span class="item" >14</span></li><li class="aaa"><span class="item" >15</span><span class="item" >16</span></li><li class="aaa"><span class="item" >17</span><span class="item" >18</span></li></ul></div><script type="text/javascript">$(function(){$(".item").click(function(){$(this).addClass("active").siblings("span").removeClass("active").parent("li").siblings().children(".item").removeClass("active")})console.log($.cookie("activeIndex" ))if ($("li").length > 0 ){if ($.cookie("activeIndex")){$($("li .item")[$.cookie("activeIndex")]).trigger("click");}else{//eval($(".itactive.active").data("func"));console.log("data属性没有添加")console.log($(this))}}})function abc(){//alert("被触发了")console.log("被触发了")}</script></body></html>复制即可看到对应的功能
js页面跳转定位
原文地址：http://www.cnblogs.com/qq735675958/p/7858056.html