菜单的选中状态随着iframe地址的变化做出相应改变
页面左侧是菜单栏，右侧是主要内容展示，用iframe写的，点击菜单中的某一项，该项背景变蓝色，右边iframe的地址发生变化。我的做法是给选中的菜单添加class='active'，同时$(this).siblings().removeClass('active');但是如果通过浏览器的返回按钮回到上一次的页面，左侧的菜单选中状态并不会发生变化，所以请问怎么样能够解决这个问题。
展开
收起
1
条回答
写回答
写回答
-
IT从业在 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>体会一下实现思路, 具体到你那边的实际情况,可能需要做相应的修改.
2019-07-17 19:43:07赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
