1

いくつかのタイトルが連続して表示されるページを設定しようとしています。その下に説明的な段落があります。ユーザーがタイトルをスクロールすると、カーソルを合わせているタイトルに応じて段落が変わります。タイトルごとに異なる色にしたいのですが、段落のフォントの色をタイトルの色に合わせて変更する必要があります。私が抱えている問題は、段落の色を変更することです。

これが私の例です：

<script type="text/javascript">
function onover(caption)
{document.getElementById('text').innerHTML=caption;}
{document.getElementById('text2').innerHTML=caption;}
</script>

<a onmouseover="onover('Paragraph 1')" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>
4

5 に答える 5

1

OPがテキストを置き換えたかったので、更新されました。 

<script type="text/javascript">
       function onover(caption,color) {
          document.getElementById('text').innerHTML=caption;
          document.getElementById('text').style.color=color;
          document.getElementById('text2').style.color=color;
   } 
</script>

<a onmouseover="onover('Paragraph 1','green')" style="color:green" id='one'>Title 1</a>
<a onmouseover="onover('Paragraph 2','red')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>

デモ

アップデート2

于 2012-10-27T06:22:20.503 に答える
0 
<script type="text/javascript">
function onover(caption, objId, obj)
{
   document.getElementById(objId).innerHTML=caption;
   document.getElementById(objId).style.color = obj.style.color;
}
</script>

<a onmouseover="onover('Paragraph 1', 'text', this)" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2', 'text2', this)" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>
于 2012-10-27T06:21:44.880 に答える
0 
document.getElementById('text2').style.color = 'blue';

テキストの色を変更します。

別の注記で {document.getElementById('text2').innerHTML=caption;}は、onover関数の一部ではありません。

于 2012-10-27T06:23:49.217 に答える
0

スタイル、ロジック、コンテンツを分離することを強くお勧めします。それはあなたのコードを読みやすくします。いくつかの推奨事項：

  • すべてのインラインスタイリング（例）はスタイルシートに置き換える必要があります
    • この例では、そうすることで、メニュー項目と段落の両方に同じスタイルを再利用できます。
  • jQueryなどのサードパーティのJavaScriptライブラリを利用して、ブラウザ間のjavascript実装の不整合の処理を簡素化します
  • インラインではなくプログラムでイベントを添付する
  • それぞれのケースを個別に処理しようとしないでください。コードをもう少し抽象化します。スタイリングを一致させるためだけに複数のdivを作成する必要はありません
  • 一般的に、すべてのスクリプトコンテンツは、ページの最後、本文の終了タグの直前に配置することをお勧めします。これにより、ページがJavaScriptを処理している間、コンテンツが表示され、サイトの読み込みが速くなるように見えます。

これらの提案を実装する方法の例を次に示します。

<style>
  .red { color: red; }
  .green { color: green; }
</style>
<div id="TitleBar">
  <a data-text="Paragraph 1" class="green">Title 1</a>
  <a data-text="Paragraph 2" class="red">Title 2</a>
</div>
<div id="text"></div>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
  $('#TitleBar').on('hover', 'a', function (e) {
    var $evTarg = $(e.target),
        $dest = $('#text');
    $dest.html($evTarg.data('text')).attr('class', $evTarg.attr('class'));
  });
</script>

最後のコメント-「段落x」のテキストが2語以上の場合は、ソースタグに埋め込むのではなく、名前付き配列にテキストを格納することを検討してください。

于 2012-10-27T06:53:05.983 に答える
0

CSSを介してそれを行う方がよいでしょう。プログラミングはまったく必要ありません。

于 2012-10-27T06:54:51.557 に答える