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 に表示されるコンテンツが変更されたメニュー項目の場合、 class .rollsel または style="background-color: #fcc " が相関を示すために表示される必要があります。 iframe コンテンツが表示されています。

これは、javascriptを拡張/追加することで可能になるはずです...使用するリンクのスタイル変更を動的に挿入しますか?

それでも、どうすればいいのかわかりません:(誰かアドバイスしてください-あなたのサポートに感謝します!

4

1 に答える 1

0

最善の方法は、追加の css クラス (.rolloverselected など) を作成し、javascript を使用して選択した項目のクラスを変更することだと思います。最も簡単な方法は、jQuery などの js フレームワークを使用してコードを単純化することでしょう。要素のクラスを変更するときはいつでも、他のすべてをデフォルトのクラスに「リセット」する必要があることに注意してください。

どうすればいいのか教えていただければ幸いです:)

于 2013-05-06T10:23:22.360 に答える