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 ...
随机推荐
- poj 2398 Toy Storage【二分+叉积】
二分点所在区域,叉积判断左右 #include<iostream> #include<cstdio> #include<cstring> #include<a ...
- 30行JavaScript代码实现一个比特币量化策略
精简极致的均线策略 30行打造一个正向收益系统 原帖地址:https://www.fmz.com/bbs-topic-new/262 没错!你听的没错是30行代码!仅仅30行小编我习惯先通篇来看看 代 ...
- 图论算法->最短路
求最短路算法,有Floyd,dijkstra,Bellmanford,spfa等诸多高级算法.优化方法也是层出不穷. 我们不妨分析一下各算法的使用特点(可能不准确 1.Floyd算法 复杂度O(n³) ...
- poj 2195 Going Home (km算法)
题目链接: http://poj.org/problem?id=2195 解题思路: 把man和home都提取出来,然后算出每个man和home的距离算出来,然后建立匹配图,套用km算法的模板,求最小 ...
- HTTP协议 之 缓存
转自: http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html HTTP协议提供了非常强大的缓存机制, 了解这些缓存机制,对提 ...
- Optimizing Downloads for Efficient Network Access
Optimizing Downloads for Efficient Network Access Previous Next 1.This lesson teaches you to Unders ...
- 436 Find Right Interval 寻找右区间
给定一组区间,对于每一个区间 i,检查是否存在一个区间 j,它的起始点大于或等于区间 i 的终点,这可以称为 j 在 i 的“右侧”.对于任何区间,你需要存储的满足条件的区间 j 的最小索引,这意味着 ...
- js内置对象总结
在js里,一切皆为或者皆可以被用作对象.可通过new一个对象或者直接以字面量形式创建变量(如var i="aaa"),所有变量都有对象的性质. 注意:通过字面量创建的对象在调用属性 ...
- 2017广东工业大学程序设计竞赛决赛 H tmk买礼物
题意: Description 今天是校赛的日子,为了庆祝这么喜庆的日子,TMK打算买些礼物给女票LSH庆祝一下. TMK进入了雪梨超市,然后刚踏入的一瞬间,店主就对TMK说:“恭喜你成为了本店第21 ...
- Spark学习之Spark Streaming（9）
Spark学习之Spark Streaming(9) 1. Spark Streaming允许用户使用一套和批处理非常接近的API来编写流式计算应用,这就可以大量重用批处理应用的技术甚至代码. 2. ...