js页面跳转定位

Posted 2020-10-14 面朝阳光/

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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页面跳转定位的主要内容，如果未能解决你的问题，请参考以下文章