Question

我想根据导航中选择的链接更改div的背景图片！

示例：假设我有一个名为：

的菜单项

#nav li.menu-item-59

选择链接后，它将变为

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

我希望每当选择一个菜单项时，div页脚的背景图像会变为另一个文件......

我已经阅读了一些关于兄弟运营商的文章，但似乎无法使其发挥作用，我不确定这是最好的方法.. 有人可以帮忙吗？谢谢！：d

Answer 1

看起来您正在使用JS将selected类添加到菜单中。在添加它的同时，还要将菜单项名称添加到页脚。类似的东西：

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);
    }
});

Answer 2

我不知道兄弟姐妹的运营商，但这可能有用......

将所有图像保存在一个地方。给所有链接提供相同的类。对于这个例子，我使用了'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 fiddle

根据导航中选择的链接更改div的背景图像

2 个答案: