1

ナビゲーションで選択したリンクに応じて、div の背景画像を変更したいです。

例: というメニュー項目があるとしましょう:

#nav li.menu-item-59

リンクを選択すると、

#nav li.menu-item-59.selected a

メニュー項目の1つが選択されるたびに、divフッターの背景画像が別のファイルに変更されることを望みます...

兄弟オペレーターに関する記事をいくつか読みましたが、うまくいかないようで、それが最善の方法かどうかわかりません..誰か助けてもらえますか? ありがとう ！:D

4

2 に答える 2

1

selectedのクラスをメニューに追加するために JS を使用しているようです。それを追加すると同時に、メニュー項目名もフッターに追加します。何かのようなもの：

var menuName = $(this).attr('id');
$('.footer').addClass(menuName);

次に、フッターの CSS で、クラスを要素の最後に追加します。

.footer.menu-item-59 {
  // background goes here
}

以下のフィドルに基づいて、試してください：

$(window).scroll(function(){   
  for(var i = 0; i < sections.length; i++)
    if($(window).scrollTop() +5 >= sections[i].top &&
    $(window).scrollTop() <= sections[i].bottom){
      sections[i].link.addClass('selected')
      .siblings().removeClass('selected');
      var selection = 'selected' + i; // new stuff starts here
      $('footer #flag').removeAttr('class');
      $('footer #flag').addClass(selection);
    }
});
于 2013-08-10T14:18:17.850 に答える
0

兄弟演算子についてはわかりませんが、これはうまくいくかもしれません...

すべての画像を 1 か所に保存します。すべてのリンクに同じクラスを与えます。この例では、'yourmenuclass' を使用しました。次に、ドキュメントをクエリして、どのドキュメントがクリックされたかをリッスンします。次に、switch ステートメントで、クリックされた画像に応じて別の画像を割り当てます。

    function init() {
    [].forEach.call(document.querySelectorAll('.yourmenuclass'), function (el) {
        el.addEventListener('click', change);
    });

    function change() {

        if (this.id == 'firstlink') {
            var back = document.getElementById("footername");
            back.style.backgroundImage =" url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Ferns02.jpg/220px-Ferns02.jpg')";
        }
        if (this.id == 'secondlink') {
            var back = document.getElementById("footername");
            back.style.backgroundImage ="url('http://www.dailyshame.co.uk/wp-content/uploads/2012/09/badger.jpg')";
        }

    }
}


onload = init;

単純なアンカーを使用している場合、これは機能しない可能性がありますが、ボタンまたは画像入力には問題ないはずです。

jsフィドル

于 2013-08-10T14:23:49.350 に答える