根据单击的菜单项更改 DIV 背景图像

Question

我有一个带有背景图片的 jumbotron 类的 div。

我还有一个包含 6 个项目的菜单。

我想使用 javascript 或 jQuery 来更改 jumbotron 的背景图像，具体取决于单击的菜单项。每个菜单项都有自己独特的图像，我想将其替换为 .jumbotron 的背景图像。

HTML：

<div class="jumbotron">    

</div>

           <ul class="nav nav-tabs"> 
                <li><a href="#" data-toggle="tab">Item 1</a></li>   
                <li><a href="#" data-toggle="tab">Item 2</a></li>
                <li><a href="#" data-toggle="tab">Item 3</a></li>     
                <li><a href="#" data-toggle="tab">Item 4</a></li>
                <li><a href="#" data-toggle="tab">Item 5</a></li>
                <li><a href="#" data-toggle="tab">Item 6</a></li>
            </ul>

CSS：

.jumbotron {
  background-image: url(../images/item1.jpg);
}

Answer 1

你可以使用css:target、<img>元素

.jumbotron {
  width: 100%;
  height: 100%;
  display: block;
}

.jumbotron img {
  width: calc(100vw);
  height: calc(100vh);
}

.jumbotron :not(:target) {
  display: none;
}

img:target {
  display: block;
}

.nav,
.jumbotron {
  position: absolute;
}

<div class="jumbotron">
  <img src="https://lorempixel.com/400/400/cats" id="cats">
  <img src="https://lorempixel.com/400/400/sports" id="sports">
  <img src="https://lorempixel.com/400/400/animals" id="animals">
  <img src="https://lorempixel.com/400/400/nature" id="nature">
  <img src="https://lorempixel.com/400/400/abstract" id="abstract">
  <img src="https://lorempixel.com/400/400/city" id="city">
</div>

<ul class="nav nav-tabs">
  <li><a href="#cats" data-toggle="tab">Item 1</a></li>
  <li><a href="#sports" data-toggle="tab">Item 2</a></li>
  <li><a href="#animals" data-toggle="tab">Item 3</a></li>
  <li><a href="#nature" data-toggle="tab">Item 4</a></li>
  <li><a href="#abstract" data-toggle="tab">Item 5</a></li>
  <li><a href="#city" data-toggle="tab">Item 6</a></li>
</ul>

Answer 2

我会将图像的路径放在数据属性中，点击时读取它，并将其指定为元素的背景图像。

$('.nav-tabs a').on('click',function(e) {
  var bg = $(this).attr('data-bg');
  $('.jumbotron').css('background-image','url('+bg+')');
})

.jumbotron {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: 0 0 no-repeat / cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron"></div>
<ul class="nav nav-tabs">
  <li><a href="#" data-toggle="tab" data-bg="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">Item 1</a></li>
  <li><a href="#" data-toggle="tab" data-bg="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg">Item 2</a></li>
  <li><a href="#" data-toggle="tab" data-bg="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg">Item 3</a></li>
</ul>

Answer 3

只需为每个元素添加一个点击处理程序，当它们被点击时改变背景图像。

如果您想使用有关选项卡的其他信息，我可能会添加一些可以引用的data 属性（即您需要的 URL）。

$(".nav.nav-tabs li a").click(function(){
  $(".jumbotron").css("background-image", "url('"+$(this).data("url")+"')");
});

.jumbotron {
  background-image: url(../images/item1.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">    

</div>

           <ul class="nav nav-tabs"> 
                <li><a href="#" data-toggle="tab" data-url="../images/item1.jpg">Item 1</a></li>   
                <li><a href="#" data-toggle="tab" data-url="../images/item2.jpg">Item 2</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item3.jpg">Item 3</a></li>     
                <li><a href="#" data-toggle="tab" data-url="../images/item4.jpg">Item 4</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item5.jpg">Item 5</a></li>
                <li><a href="#" data-toggle="tab" data-url="../images/item6.jpg">Item 6</a></li>
            </ul>

Answer 4

我会使用 jQuery 为导航容器捕获 click 事件，并根据特定的单击元素，将 background-image 属性与 .jumbotron 元素相关联。

换句话说：

$('.jumbotron').click(function() {
  var target = $(this).attr('id');
  var background;
  
  switch (target) {
    case 'someId-1':
      background = 'some-url';
      break;
    case 'someId-2':
      background = 'some-url';
      break;
    case 'someId-3':
      background = 'some-url';
      break;
    case 'someId-4':
      background = 'some-url';
      break;
    case 'someId-5':
      background = 'some-url';
      break;
    case 'someId-6':
      background = 'some-url';
      break;
  }
  
  $('.jumbotron').css('background-image', 'url(' + background + ')')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="jumbotron">    

</div>

  <ul class="nav nav-tabs"> 
    <li><a href="#" id="someId-1" data-toggle="tab">Item 1</a></li>   
    <li><a href="#" id="someId-2" data-toggle="tab">Item 2</a></li>
    <li><a href="#" id="someId-3" data-toggle="tab">Item 3</a></li>     
    <li><a href="#" id="someId-4" data-toggle="tab">Item 4</a></li>
    <li><a href="#" id="someId-5" data-toggle="tab">Item 5</a></li>
    <li><a href="#" id="someId-6" data-toggle="tab">Item 6</a></li>
  </ul>

另一种选择是为每个图像定义不同的 CSS 类，并根据点击的链接切换一个或另一个。

Answer 5

很好，很容易。只需交换一个 CSS 类。您可以稍后编辑 css 以更改图片大小、位置、实际图像，而无需触摸代码。

<html>
<head>

<style>
.btnOne {
     background-image: url('obi.jpg');
}
.btnTwo {
     background-image: url('luke.jpg');
}
.picStyle {
     width: 75px;
     height: 75px;
}

</style>
</head>
<body>

<div id="btn1" onclick="changeIt ( this )">Button 1</div>
<div id="btn2" onclick="changeIt ( this )">Button 2</div>
<div id="pic" class="btnOne picStyle"></div>

<script>

function changeIt ( elem ) {
    let pic = document.getElementById ( 'pic' );
    if ( elem.id === 'btn1' ) {
        pic.classList = [ 'btnOne', 'picStyle' ];
    } else {
        pic.classList = [ 'btnTwo', 'picStyle' ];
    }
}
</script>

</body>
</html>

Answer 6

如果您将图像命名为 item1、item2 等，则以下内容将起作用：

$(document).on("click", "a[data-toggle]", function() {
  var background = $(this).text().replace(" ", "").toLowerCase();
  alert(background);
  $(".jumbotron").css("background-image", 'url(../images/' + background + '.jpg)');
})