1

私は今少し行き詰まっています。基本的にDOMにヘッダー要素があり、インデックスページのCSSにハードコーディングされた背景画像があります。

私が探していたのは、この画像を別のページで変更することでした。これはかなり簡単なことだと思いました。

$('header').css("background-image","url(assets/img/consulting.png)")

イベントトリガーがないことはわかっていますが、実際にそれを行う必要はないという印象を受けました.

また、jQuery を追加するページの CSS ファイルとファイルは、img フォルダーと同様に別のフォルダーにあります... jQuery コードで URL を呼び出す方法がわかりません。CSS ファイルまたは HTML ファイルからナビゲートするようにする必要がありますか?

ここで本当に明らかなことを見逃していたらごめんなさい。

4

2 に答える 2

2

これは、単純にクリック イベントが必要な場合でも、jQuery から css の大部分を削除するためのアプローチです。

これをページごとに行います。

<body class="home">
<body class="about">
<body class="contact">

次に、CSSで次のことを行います

.home header { background-image: url(../assets/img/consulting.png"; }
.about header { background-image: url(../assets/img/consulting2.png"; }
.contact header { background-image: url(../assets/img/consulting3.png"; }

サイトが、他のページのコンテンツを更新せずにロードする単一のインデックスである場合は、それが可能です。

$(function(){
    $('#aboutlink').click(function(e){
        $('body').removeClass().addClass('about');

        //your other snippets here

        e.preventDefault();
    });
});
于 2012-05-23T22:52:42.680 に答える
0

ページの初期状態を変更するには、ページが読み込まれるまで JavaScript の実行を待つ必要があります。

それにはいくつかの方法があります。jQuery で最も一般的なものは次のとおりです。

1) document.ready() を使用します。

$(document).ready(function() {
    $('header').css("background-image","url(assets/img/consulting.png)")
});

2) コードを<script>タグ内に配置しますが、本文の最後 (タグの直前</body>) に配置して、HTML が既に解析された後に実行されるようにします。

もちろん、画像の URL も正しく、ブラウザが適切なパスを指定していることを確認する必要があります。

ページの HTML/CSS を制御する場合は、初期状態をページの CSS スタイルに入れる方がはるかに優れています。これは、ページが一方向にレンダリングされるのではなく、最初から正しい方法でレンダリングされるためです。 JS で別の方法に変更します。

于 2012-05-23T22:46:55.470 に答える