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{
100%;
height: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.box ul{
100%;
height: 500px;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #CCCCCC;
}
.box li{
80%;
text-align: center;
padding: 0 10%;
margin-bottom: 20px;
overflow: hidden;
}
.box li span{
display: inline-block;
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>
复制即可看到对应的功能