私は 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 に表示されるコンテンツが変更されたメニュー項目の場合、 class .rollsel または style="background-color: #fcc " が相関を示すために表示される必要があります。 iframe コンテンツが表示されています。
これは、javascriptを拡張/追加することで可能になるはずです...使用するリンクのスタイル変更を動的に挿入しますか?
それでも、どうすればいいのかわかりません:(誰かアドバイスしてください-あなたのサポートに感謝します!