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. bzoj1756

    1756: Vijos1083 小白逛公园 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1150  Solved: 371[Submit][Statu ...

  2. 洛谷 P2593 [ZJOI2006]超级麻将【dp】

    设f[i][j][k][0/1]表示选到i时,i-1选j张,i选k张,之前选的所有牌是否选择了对子 然后分情况讨论转移即可 #include<iostream> #include<c ...

  3. tableView 加载更多

    在ios开中中,由于屏幕尺寸限制,如果需要显示的数据很多,需要用到分页加载. 原理:先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是 ...

  4. Logstash同步mysql数据库信息到ES

    @font-face{ font-family:"Times New Roman"; } @font-face{ font-family:"宋体"; } @fo ...

  5. [HNOI2008]Card洗牌

    Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张红 ...

  6. BitCoin工作原理

    1.加密货币 公共账本-信任+加密算法=加密货币 BitCoin是第一个被是实现出来的加密货币. 首先理解比特币是什么,在考虑要不要买入?(人人都想一夜暴富,美哉) 2.发送.接收.创造比特币的时候电 ...

  7. Physical Education Lessons Codeforces - 915E

    http://codeforces.com/problemset/problem/915/E 大概有几种思路: 1.动态开点线段树+标记下传 #1.1标记永久化:想了一会没想出来 1.2可以先扫一遍询 ...

  8. 题解报告：poj 2533 Longest Ordered Subsequence（最长上升子序列LIS）

    Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...

  9. Android中集成第三方支付

    常见的第三方支付解决方案 支付宝支付 微信支付 银联支付 Ping++统一支付平台(需要继承服务器端和客户端) 短信支付 支付宝的集成流程 相关资料链接: 支付宝支付指引流程:支付指引流程 支付宝An ...

  10. Jboss服务器使用

    一.作者前言 早上坐地铁的时候,阅览about JAVA.了解到一个程序猿,对于服务器的使用,最起码的熟悉那么几种,例如tomcat,jboss,weblogic,websphere,还有Nginx. ...