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

随机推荐

《Iterative-GAN》的算法伪代码整理
花了一下午时间整理本人的论文Iterative-GAN的算法伪代码,由于篇幅较长,投会议方面的文章就不加入了,以后如果投期刊再说.留此存档.
PCB Web版SI9000阻抗计算器
在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法 ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现. 一.Web版SI9000阻抗计算器 ...
mybatise
http://www.cnblogs.com/xdp-gacl/p/4261895.html
利用插件（jQuery-ui.js）实现表格行的拖拽排序
template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...
P4949 最短距离（树链剖分+树状数组+基环树）
传送门一个中午啊-- 本来打算用仙人掌搞的,后来发现直接基环树就可以了,把多出来的那条边单独记录为\((dx,dy,dw)\),剩下的树剖然后最短路径要么直接树上跑,要么经过多出来的边,分别讨论就 ...
bzoj3316: JC loves Mkk（单调队列+分数规划）
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...
小程序获取地理位置-- wx.getLocation
话不多说直接上栗子 //首先声明变量data:{ showLocationAuth:fasle } //这是第一种逻辑实现方式点击按钮//当第一次点击授权按钮,用户取消授权之后,就会显示授权当前定 ...
关于python安装lxml插件的问题
文章只是介绍自己安装时从安装不上到安装后报错,再到安装成功的心路历程,并不代表广大欧皇也会会出现同类型的问题,也不是总结和汇总各种出问题的原因. 直接进入正题,首先我这边是win环境,电脑上装的是py ...
Java之简单的四则运算
简单的四则运算请你编写程序实现能处理两个数的+.-.*./.%的表达式程序.数据的输入/输出全部使用标准输入/输出,输入数据的第一行为你需要计算表达式的个数,从第2行开始,每一行为你计算的一个表达式 ...
linux 查看进程和端口
1.进程查看 #ps aux | grep java 2.查看系统与内核相关信息 #uname [-asrmpi] 查看系统位数 # uname -m 3.查看端口 #netstat [-aatunl ...

js页面跳转定位

js页面跳转定位的更多相关文章

随机推荐

热门专题