全屏背景图片

Question

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

e.g。

任何好的提示都会受到极大的赞赏。

我要做的是两件事。

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

Answer 2

通常这就是你要找的东西：

$('.thumbnail').click(function(e) {
  e.preventDefault(); // don't execute the link
  $(.thumbnail').css('background-color', 'none'); // reset all BG colors
  $(this).css('background-color', '#00FF00'); // fill BG of clicked elements parent (the p-element).

  var imghref = $(this).attr('href'); // get the image src from the href
  $('#grouptabs').attr('src', imghref);  // set the image src for #grouptabs
});

这适用于以下设置：

         1      2      3      4        

因此图像被加载到grouptab（完整大小）。在CSS中，您应该指定类缩略图中的a元素具有边框而没有bgcolor。 BG颜色由jquery点击事件处理。

希望这有帮助。

// EDIT：试试这个：

$('.crafty').click(function(e) {
  e.preventDefault();
  $('.foliolist').css('background-color', 'transparant'); // set all foliolist items bg color to transparant
  $(this).parent().css('background-color', '#FFFFFF');
  $('#grouptabs').attr('src', $(this).attr('href'));
});

我不确定您是否使用此设置：

<div class="foliolist"><a href="img/dir/file.jpg"></a></div>
<div class="foliolist"><a href="img/dir/file.jpg"></a></div>
<div class="foliolist"><a href="img/dir/file.jpg"></a></div>

或

<div class="foliolist">
  <a href="img/dir/file.jpg"></a>
  <a href="img/dir/file.jpg"></a>
  <a href="img/dir/file.jpg"></a>
</div>

因为有区别。在第一种情况下我的脚本工作。在第二种情况下，您需要将样式（背景颜色）应用于$（this）而不是$（this）.parent（）