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. 摘抄 - linux 目录结构简介

    /   根目录 |—–/bin   软连接,指向 /usr/bin.存储一些命令,一般为用户命令 |—-/boot  系统启动相关的文件;包括启动时内核的一些配置,grub配置等等:一般为之分配300 ...

  2. bzoj 3930: [CQOI2015]选数【递推】

    妙啊 这个题一上来就想的是莫比乌斯反演: \[ f(d)=\sum_{k=1}^{\left \lceil \frac{r}{d} \right \rceil}\mu(k)(\left \lceil ...

  3. 洛谷P4206 [NOI2005]聪聪与可可（期望dp+最短路）

    传送门 首先,猫的走位太飘了……只能预处理…… 先对每一个点跑一遍dijkstra跑出最短路,然后再预处理出$nxt[i][j]$表示当猫在$i$老鼠在$j$时猫下一步会走到哪里 然后考虑dp,设$d ...

  4. PhpStorm Xdebug远程调试环境搭建原理分析及问题排查

    2017年05月26日  经验心得 目录   一. 环境介绍 二. 远程环境配置 2.2 Xdebug安装 2.3 配置 三. 本地phpstorm配置 3.1 下载远程代码 3.2 添加php解释器 ...

  5. 手机APP测试点总结（参考）

    参考链接:http://www.zengyuetian.com/?p=2305 手机APP测试点: 功能测试:多注意核心业务风险(如:注册.登录.付费.订单等) 兼容性测试:系统兼容性.硬件兼容性.软 ...

  6. 执行linux脚本出现问题

    1. 权限不够: 使用 chmod +x XXX.sh 提升权限 2. 出现:/bin/bash^M: bad interpreter: No such file or directory 原因:文件 ...

  7. ACM_逆序数（归并排序）

    帮挂科 Time Limit: 2000/1000ms (Java/Others) 64bit IO Format: %lld & %llu Problem Description: 冬瓜发现 ...

  8. Styles and Themens(4)android自定义主题时可使用的属性

    A list of the standard attributes that you can use in themes can be found at R.styleable.Theme. Cons ...

  9. Python 相关疑问

    1. 如果我的脚本error handling 做的好,在ctrl+c退出的时候是不是不应该有任何traceback log? 2. repr() str() eval() 之间的区别? 3. 参数传 ...

  10. D. Winter Is Coming 贪心（好题）

    http://codeforces.com/contest/747/problem/D 大概的思路就是找到所有两个负数夹着的线段,优先覆盖最小的长度.使得那时候不用换鞋,是最优的. 但是这里有个坑点, ...