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页面跳转定位的更多相关文章

  1. js页面跳转整理

    js页面跳转整理 js方式的页面跳转1.window.location.href方式    <script language="javascript" type=" ...

  2. js页面跳转参考代码大全

    整理一下JS页面跳转参考代码 第一种:     <script language=/"javascript/" type=/"text/javascript/&qu ...

  3. js页面跳转 和 js打开新窗口 方法

    js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...

  4. 常用的JS页面跳转代码调用大全

    一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...

  5. JS页面跳转的常用方法整理.

    <script type="text/javascript"> //js页面跳转 function showtabs() { window.location.href ...

  6. JS页面跳转代码怎么写?总结了5种方法

    我们在建站时有些链接是固定的,比如客服咨询链接,一般是第三方url,如果直接加上去不太专业,那么就想着用站内的页面做跳转,跳转用js比较多,那么JS页面跳转代码怎么写呢?ytkah在网上搜索了一下,大 ...

  7. JS页面跳转大全

    所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面.目前很多垃圾站经常用js跳转将正常页面跳转到广告页面,当然也 ...

  8. PHP和JS页面跳转和刷新总结

    PHP 页面跳转: // 只是跳转,所以一定要用die();或者exit;终止下一步操作; header('location:index.php'); exit; // 等待3秒,跳转并刷新 head ...

  9. js页面跳转常用的几种方式（转）

    js页面跳转常用的几种方式 转载  2010-11-25   作者:    我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...

随机推荐

  1. C++中continue

    /* C++中continue使用 Author:盗了一个你 */ #include<iostream> using namespace std; int main() { int val ...

  2. 使用git管理远程仓库

    1.从现有仓库克隆 git clone git://github.com/schacon/grit.git 2.检查当前文件状态 git status 3.跟踪新文件 git add XXX 4.忽略 ...

  3. asp.net MVC 枚举类型的处理的几种方式

    枚举类型本质上是int类型,整型,这是非常重要的一点. 可以使用(int)将它强制转换为 整形.如果要使用MVC5提供的新辅助方法@Html.EnumDropDownListFor()方法,就必须将枚 ...

  4. bzoj 1680: [Usaco2005 Mar]Yogurt factory【贪心】

    贪心,一边读入一边更新mn,用mn更新答案,mn每次加s #include<iostream> #include<cstdio> using namespace std; in ...

  5. 【爬坑系列】之解读kubernetes的认证原理&实践

    对于访问kube-apiserver模块的请求来说,如果是使用http协议,则会顺利进入模块内部得到自己想要的:但是如果是用的是https,则能否进入模块内部获得想要的资源,他会首先要进行https自 ...

  6. Linux下UDP简介及程序设计

    一.UDP简介 UDP(User Datagram Protocol),用户数据报协议,是OSI参考模型中一种无连接的传输层协议,提供面向事务的简单不可靠信息传送服务.UDP提供了无连接通信,且不对传 ...

  7. [POI2012]Vouchers

    Description 考虑正整数集合,现在有n组人依次来取数,假设第i组来了x人,他们每个取的数一定是x的倍数,并且是还剩下的最小的x个. 正整数中有m个数被标成了幸运数,问有哪些人取到了幸运数. ...

  8. Codeforces Round #479 (Div. 3)解题代码

    A. Wrong Subtraction #include <bits/stdc++.h> using namespace std; int main() { int n,k; cin&g ...

  9. java数组实现买彩票（阿基老师的打乱排序思想）

    package com.wh.array; public class Lottery { public static void main(String[] args) { int[] num=new ...

  10. python的des和3des加解密

    1.加密: pyDes.des(key, [mode], [IV], [pad], [padmode]) pyDes.triple_des(key, [mode], [IV], [pad], [pad ...