菜单的选中状态随着iframe地址的变化做出相应改变

页面左侧是菜单栏，右侧是主要内容展示，用iframe写的，点击菜单中的某一项，该项背景变蓝色，右边iframe的地址发生变化。我的做法是给选中的菜单添加class='active'，同时$(this).siblings().removeClass('active');但是如果通过浏览器的返回按钮回到上一次的页面，左侧的菜单选中状态并不会发生变化，所以请问怎么样能够解决这个问题。

在 iframe 里面加JS, 在被加载的时候调用 parent.ActiveMenu 之类的函数(并传递参数), 然后 ActiveMenu 这个函数, 根据不同的参数, 激活不同的菜单.

演示(不保证长期有效): https://xqin.net/temp/menu2/

相关代码:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .active{font-size:42px; color:red;}
        li{list-style: none;margin: 20px;}
    </style>
</head>
<body>
    <ul>
        <li><a href="i.php?index=0" target="main">1111</a></li>
        <li><a href="i.php?index=1" target="main">2222</a></li>
        <li><a href="i.php?index=2" target="main">3333</a></li>
        <li><a href="i.php?index=3" target="main">4444</a></li>
        <li><a href="i.php?index=4" target="main">5555</a></li>
    </ul>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript">
    function ActiveMenu(index){
        $('li.active').removeClass('active');
        $('li:eq(' + index + ')').addClass('active');
    }
    </script>
    <iframe name="main" src="i.php?index=0"></iframe>
</body>
</html>

i.php

<?php
echo '<pre>';
//输出 $_GET
var_dump($_GET);?>

<script>parent.ActiveMenu(<?php echo $_GET['index'];?>);</script>

体会一下实现思路, 具体到你那边的实际情况,可能需要做相应的修改.

【热门文章】