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>
复制即可看到对应的功能