gpt4 book ai didi

javascript - 为交换 iframe 内容的菜单项动态分配 'sticky' 选定状态

转载 作者:太空宇宙 更新时间:2023-11-03 18:45:58 24 4
gpt4 key购买 nike

我是 JavaScript 的新手,找不到解决/解决我的问题的现有答案。我的基本工作设置是这样的:

站点左侧有一个菜单,相应的页面内容加载到右侧的 iframe 中。单击菜单链接会交换 iframe 中显示的 .htm,这是通过 javascript 完成的。链接的悬停效果是对透明菜单图像的 CSS 背景颜色更改。

这些方面工作正常!查看相关代码部分:

<head>
<script type="text/javascript">
function change_frame( srcURL ) {
if ( !srcURL ) { return }
var a_frame = document.getElementById('frame1');
a_frame.src = srcURL;
}
</script>
</head>
<body>
<div class="menu_lft">
<div class="rollover">
<a href="javascript:change_frame('media_nasd.htm')"><img src="img/cpf/clp_nas.gif" width="160" height="9" border="0" /><br /></a>
<a href="javascript:change_frame('media_ibm.htm')"><img src="img/cpf/clp_ilm.gif" width="160" height="9" border="0" /><br /></a>
<a href="javascript:change_frame('media_indo.htm')"><img src="img/cpf/clp_dgt.gif" width="160" height="9" border="0" /><br /></a>
<a href="javascript:change_frame('media_att.htm')"><img src="img/cpf/clp_att.gif" width="160" height="9" border="0" /><br /></a>
<a href="javascript:change_frame('media_the.htm')"><img src="img/cpf/clp_the.gif" width="160" height="9" border="0" /><br /></a>
<a href="javascript:change_frame('media_ibs.htm')"><img src="img/cpf/clp_ibs.gif" width="160" height="9" border="0" /><br /></a>
</div>
</div>
<div class="content">
<iframe frameborder="0" width="100%" height="600" id="frame1" name="frame1" src="media_nasd.htm"></iframe>
</div>
</body>

注意:默认情况下(即首次访问主页时)最顶部链接的内容加载到 iframe 中。

现在我的问题是,如何动态地将“选中”状态分配给所选菜单项?

我的菜单行为类:

    .rollover a { display:block; width:160px; height:9px; margin-bottom:4px; 
background-color: #fff;
}
.rollover a:hover { background-color: #dddedf; }
.rollsel { background-color: #fcc; }

我的意思是:对于被点击的菜单项,它改变了 iframe 中显示的内容,类 .rollsel 或 style="background-color: #fcc "应该显示以指示相关性,即 'stick' 作为只要正在查看相关的 iframe 内容。

这似乎应该可以通过扩展/添加到 javascript...来动态插入所用链接的样式更改?

但我不知道该怎么做 :( 有人可以提供建议 - 非常感谢您的支持!

最佳答案

我认为最好的方法是创建一个额外的 css 类(即:.rolloverselected 或类似的东西)并使用 javascript 更改所选元素的类。最简单的方法可能是使用 js 框架(如 jQuery)来简化代码。请记住,无论何时更改元素的类,所有其他元素都必须“重置”为默认类。

希望我给了你一个如何去做的想法:)

关于javascript - 为交换 iframe 内容的菜单项动态分配 'sticky' 选定状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16396522/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com