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 ...
随机推荐
- SLC-测试-Postman：Postman 工具
ylbtech-SLC-测试-Postman:Postman 工具 1.返回顶部 1. 一.Request 请求 Request 请求,我们只介绍常用的四种:GET.POST.PUT.DELETE,其 ...
- cmd登入mysql的命令不要写分号
下面是正确的: 下面这个就是错误的 mysqldump同理
- MFC绘图
//20171/121 两点一线 比如鼠标左击和鼠标弹起的两个消息 然后响应从而获取一条线2 添加响应函数方法 类图->右击->addwindowsmessage3 Dview和main中 ...
- idea打开可选项目
配置上面的即可
- linux自动连接校园网设置
不知道有没有人用linux的时候碰到过校园网连接后,跳不出登录界面,即使手动输入也没有作用.写一个可能可行的方法: - 首先打开控制面板 选择网络代理 将代理中的选项设置为 估计现在就能自动弹出登录页 ...
- Android SQLite(2)如何判断表是否已经存在
在sql语句中用 if not exists void create_table(){ SQLiteDatabase dbWireter = dbhelper.getWritableDatabase( ...
- 452 Minimum Number of Arrows to Burst Balloons 用最少数量的箭引爆气球
在二维空间中有许多球形的气球.对于每个气球,提供的输入是水平方向上,气球直径的开始和结束坐标.由于它是水平的,所以y坐标并不重要,因此只要知道开始和结束的x坐标就足够了.开始坐标总是小于结束坐标.平面 ...
- 学习笔记 第六章 使用CSS美化图片
第六章 使用CSS美化图片 6.1 在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
- 微信官方UI库—WeUI
WeUI 为微信 Web 服务量身设计 概述 WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell ...
- fatal: Authentication failed for 问题解决
执行以下code git config --system --unset credential.helper 参考地址: https://www.jianshu.com/p/8a7f257e07b8