0

私はこれを達成する方法を考え出すのに大変な時間を過ごしています-そして私は逸脱しますが、それがウェブ全体でより一般的な出来事ではないことに驚いています。

私は1ページに収めようとしている小さなサイトを構築しています。最終的には、サイトはUSB上に存在するため、可能な限り自己完結型（ファイル単位）にする必要があります。現在、ナビゲーションメニュー（つまり、ページ1、ページ2、ページ3）が垂直方向にあり、メニューからリンクを選択すると、そのセクションの新しいコンテンツが表示されます。変更されたCoda-Sliderスクリプトのおかげで、この部分が（多かれ少なかれ）ダウンしました（ここを参照してください：http：//codysilfies.com/orn/）。

わからないのは、メニュー項目をクリックしたときに内容を変更するだけでなく、背景も変更したいということです。したがって、Menu_Item_1には、BGImage1.jpg、Menu_Item_2--BGImage2.jpgなどが表示されます。http://brewfestgb.com/#!/merriment-そのページにはたくさんの追加機能がありますが...どうすればいいのかよくわかりません。それを行うためのより簡単な方法が必要です。

「画像を変更するには、1つのリンクをクリックする」チュートリアルがたくさんありますが、複数のリンクがある場合は何もありません。また、背景に同じスライダーコードを使用してみましたが、画像をブラウザーウィンドウのサイズにサイズ変更してスライダーを機能させることはできません（明らかに設定された幅が必要です）。これはコンテンツビットで機能します。ただし、ブラウザで背景のサイズを変更したい場合は除きます）。

何かアドバイス...またはリード？私には誰かが何かを知っているべきだと思います。前もって感謝します！

4

1 に答える 1

1

クリックハンドラーが起動されたときに背景画像を変更できます。

$('a.link').click(function(){
   // Find the image value
   var background = 'BGImage' + $(this).data('bg') + '.jpg';

   // Change CSS background-image
   $('body').css('background-image',background);
});

リンクは次のようになっている必要があります。

<a href="path/to/link1" class="link" data-bg="1">Link 1</a>
<a href="path/to/link2" class="link" data-bg="2">Link 2</a>
<a href="path/to/link3" class="link" data-bg="3">Link 3</a>
于 2012-04-04T01:47:43.700 に答える