js页面跳转定位
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页面跳转定位的更多相关文章
- js页面跳转整理
js页面跳转整理 js方式的页面跳转1.window.location.href方式 <script language="javascript" type=" ...
- js页面跳转参考代码大全
整理一下JS页面跳转参考代码 第一种: <script language=/"javascript/" type=/"text/javascript/&qu ...
- js页面跳转 和 js打开新窗口 方法
js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...
- 常用的JS页面跳转代码调用大全
一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...
- JS页面跳转的常用方法整理.
<script type="text/javascript"> //js页面跳转 function showtabs() { window.location.href ...
- JS页面跳转代码怎么写?总结了5种方法
我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转代码怎么写呢?ytkah在网上搜索了一下,大 ...
- JS页面跳转大全
所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面.目前很多垃圾站经常用js跳转将正常页面跳转到广告页面,当然也 ...
- PHP和JS页面跳转和刷新总结
PHP 页面跳转: // 只是跳转,所以一定要用die();或者exit;终止下一步操作; header('location:index.php'); exit; // 等待3秒,跳转并刷新 head ...
- js页面跳转常用的几种方式（转）
js页面跳转常用的几种方式 转载 2010-11-25 作者: 我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...
随机推荐
- 小程序-demo：小程序示例-page/common
ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0. 1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...
- Pessimistic Offline Lock悲观离线锁
每次只允许一个业务事务来访问数据,以防止并发业务事务中的冲突. 离线并发处理通常会出现多个业务事务操作同一数据. 最简单的办法是为整个业务事务保持一个系统事务.但是事务系统不适合于处理长事务. 首选乐 ...
- bzoj 2216: [Poi2011]Lightning Conductor【决策单调性dp+分治】
参考:https://blog.csdn.net/clove_unique/article/details/57405845 死活不过样例看了题解才发现要用double.... \[ a_j \leq ...
- CentOS 7安装并设置启动图形桌面
服务器端有时没有安装图形桌面,采用下面的步骤安装gnome桌面,并能够启动后进入图形桌面 1.安装图形环境 #yum grouplist#yum groupinstall 'GNOME Desktop ...
- SQL Server 语法注意
1.order by select a1,a1 from temp order by a1 此语句在高版本中执行提示a1列名不明确,在低版本中执行成功!
- 状压入门--bzoj1087: [SCOI2005]互不侵犯King【状压dp】
Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上 左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行, ...
- centos 7更换阿里源
转自 https://blog.csdn.net/jameshadoop/article/details/54881295 centos7 修改yum源为阿里源,某下网络下速度比较快 首先是到yum源 ...
- 作为一个程序员，你了解 win 上有哪些必装的软件吗
关于 win 的一些基础必知内容之前已经分享过,没有看过的可以戳此处→Windows 使用之那些你还不知道操作 新系统安装的第一个软件 Google Chrome 毫无疑问,作为程序员应该是首选的浏览 ...
- 跨域时发送预检请求，tp5的restful无options方法的解决方案
解决 跨域问题解决 问题:使用vue-resource发送delete请求时报options请求404 思考:明明发送的是delete请求,为何变成了options请求? 答:跨域情况下,PUT,DE ...
- QQ文件没有读取权限，60017导致QQ无法登陆的终极解决办法
每隔一段时间,我的QQ就无法登陆,提示:QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法 点击了解详情发现里面的解决办法根本不起作用,网上 说的各种解决办法都不起作用,解决办法如下 1. ...