<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jQuery311.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box_headers {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #f9ad2e;
}
.box_headers .box_error_fl {
padding-left: 70px;
}
.box_headers .box_error_fl h1 {
height: 100px;
line-height: 100px;
padding-left: 90px;
font-size: 30px;
}
/*//左侧导航*/
.box_left {
position: fixed;
background: rgba(0, 0, 0, 0.3) bottom: 0;
color: #333333;
left: 0;
top: 100px;
width: 180px;
overflow-y: auto;
overflow-x: hidden;
font-size: 16px;
}
.box_left .ul_zhu .li_zhu {
line-height: 35px;
}
.box_left .ul_zhu .li_zhu .color_zhu {
background: #169fe6;
color: #fff;
}
.box_left .ul_zhu .li_zhu a {
padding-left: 20px;
width: 100%;
height: 100%;
display: block;
}
.box_left .ul_zhu .li_zhu .li_fu {
line-height: 30px;
font-size: 14px;
}
.box_left .ul_zhu .li_zhu .li_fu .color_fu {
color: #ff7e00;
}
.box_left .ul_zhu .li_zhu .li_fu a {
padding-left: 40px;
}
.box_right {
position: fixed;
top: 100px;
left: 160px;
bottom: 0;
right: 0;
background: #fff;
}
.box_right iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body class="bodys" style="overflow:hidden;">
<div class="box_headers">
<div class="fl box_error_fl">
<h1>iframe刷新停留在原页面二级菜单</h1>
</div>
</div>
<div class="box_left">
<ul class="ul_zhu">
<li class="li_zhu" path="one_to_one">
<a>第一条</a>
<ul style="display: none;">
<li class="li_fu" path="one_to_one">
<a>第一条第一个</a>
</li>
</ul>
</li>
<li class="li_zhu" path="two_to_one">
<a>第二条</a>
<ul style="display: none;">
<li class="li_fu" path="two_to_one">
<a>第二条第一个</a>
</li>
<li class="li_fu" path="two_to_two">
<a>第二条第二个</a>
</li>
<li class="li_fu" path="two_to_three">
<a>第二条第三个</a>
</li>
<li class="li_fu" path="two_to_four">
<a>第二条第四个</a>
</li>
<li class="li_fu" path="two_to_five">
<a>第二条第五个</a>
</li>
</ul>
</li>
<li class="li_zhu" path="three_to_one">
<a>第三条</a>
<ul style="display: none;">
<li class="li_fu" path="three_to_one">
<a>第三条第一个</a>
</li>
<li class="li_fu" path="three_to_two">
<a>第三条第二个</a>
</li>
</ul>
</li>
<li class="li_zhu" path="four_to_one">
<a>第四条</a>
<ul style="display: none;">
<li class="li_fu" path="four_to_one">
<a>第四条第一个</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="box_right">
<iframe src=""></iframe>
</div>
<script type="text/javascript">
function index_xiang() {
var remzhu = window.sessionStorage.getItem("remzhu")
var remfu = window.sessionStorage.getItem("remfu")
$(".li_zhu").eq(remzhu).children("a").addClass("color_zhu")
$(".li_zhu").eq(remzhu).find(".li_fu").eq(remfu).children("a").addClass("color_fu")
var path = $(".li_zhu").eq(remzhu).find(".li_fu").eq(remfu).attr("path")
$(".box_right iframe").attr("src", path)
$(".li_zhu").eq(remzhu).find("ul").slideDown()
}
$(function() {
index_xiang()
$(document).on("click", "li a", function() {
var path = $(this).parent().attr("path")
$(".box_right iframe").attr("src", path)
})
//点击外li
$(document).on("click", ".li_zhu", function() {
var path = $(this).attr("path")
$(".box_right iframe").attr("src", path)
$(this).children("a").addClass("color_zhu")
$(this).find("ul").slideToggle()
$(this).siblings().find("ul").slideUp()
$(this).siblings().children().removeClass("color_zhu")
$(this).find(".li_fu a").removeClass("color_fu")
$(this).find(".li_fu a").first().addClass("color_fu")
$(this).siblings().find(".li_fu a").removeClass("color_fu")
var remzhu = $(this).index()
window.sessionStorage.setItem("remzhu", remzhu);
window.sessionStorage.setItem("remfu", "0");
})
//点击内li
$(document).on("click", ".li_fu", function(e) {
e.stopPropagation()
var path = $(this).attr("path")
$(".box_right iframe").attr("src", path)
$(this).children("a").addClass("color_fu")
$(this).siblings().find("a").removeClass("color_fu")
var remfu = $(this).index()
window.sessionStorage.setItem("remfu", remfu);
})
})
</script>
</body>
</html>
