1

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

示例：假设我有一个名为的菜单项：

#nav li.menu-item-59

当链接被选中时，它变为

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

I'd like that whenever one of the menu item is selected the background image of the div footer change to a different file...

我读过一些关于兄弟操作符的文章，但似乎无法让它工作，我不确定这是最好的方法..有人可以帮忙吗？谢谢 ！:D

4

2 回答 2

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);
    }
});
于 2013-08-10T14:18:17.850 回答
0

我不知道兄弟运算符，但这可能有用......

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