jquery - 全屏背景图像

Question

我已经有了背景图片。但我正在建立一个有不同类别的画廊。如果我选择一个类别，图像将以小方 block 加载，然后当我选择其中任何一个时，我希望它更改命名 ID 的内容...

例如

任何好的提示将不胜感激。

我要做的是两个元素。

1. 将导航框的颜色更改为纯色。

2. 单击时更改id“grouptabs”的图像源

   <div id="random"> <img id="grouptabs" src="/u/i/1920x1200.jpg" /> </div>

这就是我要达到的目的... 感谢您的所有建议

Answer 1

假设您已经存储了类别的背景信息。例如通过 jQuery.data()

那么你需要做的就是

$('.category').click(function(){
  var thisElem = $(this)
  $('#myBackround').css({background-image:"url('"+thisElem.data('backgroundImagePath')+"')"})
})

此示例展示了如何更改 dom 元素的背景图像。但是，如果您想更改内容，则可以使用 jQuery.html() 而不是 jQuery.css()

作为旁注，您还可以将当前单击的类别设置为另一个不透明度级别，以显示这是选定的元素。

那么你会做这样的事情:

$('.category').click(function(){
  var thisElem = $(this)
  //remove active effect on any previously selected categories
  thisElem.siblings().removeClass('activeCategory')
  //add active effect to currently selected category
  thisElem.addClass('activeCategory')

  $('#myBackround').css({
        background-image:"url('"+thisElem.data('backgroundImagePath')+"')"
  })

})

你可以在哪里拥有 css 属性

.activeCategory {
  opacity: 0.5;
  background-color: #f60;
}