点击实现页面的跳转及跳转到同一页面的不同iframe模块(也许标题看不清楚,但是想实现功能性跳转的请看内容)
初衷,看到别的项目用id值就能实现页面的跳转,找不到人家的控制代码,所以自己查找资料,自己实现功能.这是对之前的实现iframe跳转的的补充和修改,
肯定有不足之处还望大神指点
index代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<header id="top">
<ul>
<li id="index">首页</li>
<li id="01">子页面1</li>
<li id="02">子页面2</li>
<li id="03">子页面3</li>
</ul>
</header>
<section style="width: 1000px;height: 500px;margin: 0 auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eius minima rem vel! Accusantium assumenda cum harum iure minus nobis recusandae repellendus reprehenderit! Consectetur culpa facilis modi rem repellat suscipit?</section>
<footer id="foot">©mumu</footer>
<script>
$(function(){
$("#top li").click(function(){
if($(this).attr("id")!="index"){
window.open("main.html?id="+$(this).attr("id"),"_top");
}
})
})
</script>
</body>
</html>
main.html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<header id="top">
<ul>
<li id="index">首页</li>
<li id="01">子页面1</li>
<li id="02">子页面2</li>
<li id="03">子页面3</li>
</ul>
</header>
<section id="main">
<iframe frameborder="0" src="01.html"></iframe>
</section>
<footer id="foot">©mumu</footer>
<script src="js/jsss.js">
</script>
</body>
</html>
jsss.js代码:
$(function(){
$("#top li").click(function(){
if($(this).attr("id")!="index"){
$("iframe").attr("src",$(this).attr("id")+".html" );
}else{
window.open("index.html","_top");
}
})
function changePage(){
var C1=window.location.href.split("?")[1]; //得到id=楼主
var C2=C1.split("=")[1]; //得到楼主
console.log(C2);
$("iframe").attr("src",C2+".html");
}
changePage();
});
子页面1代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
width: 1200px;
margin: 0 auto;
}
</style>
<body>
子页面111111111111111111111111111111111111111
</body>
</html>
