1

我是 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" 以指示相关性，即只要相关就“坚持”正在查看 iframe 内容。

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

然而我不知道该怎么做:(有人可以建议 - 非常感谢你的支持！

4

1 回答 1

0

我认为最好的方法是创建一个额外的 css 类（即：.rolloverselected 或类似的东西）并使用 javascript 来更改所选项目的类。最简单的方法可能是使用 jQuery 等 js 框架来简化代码。请记住，每当您更改元素的类时，所有其他元素都必须“重置”为默认类。

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

于 2013-05-06T10:23:22.360 回答