根據點擊哪個菜單項來更改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

我會把路徑的數據屬性的圖像，讀取在點擊，並將其指定爲的背景圖像元件。

$('.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 2

只需添加一個單擊處理每個元素，當他們點擊更改背景圖片。

如果您想要使用有關選項卡的其他信息，我可能會添加一些可以引用的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 3

您可以使用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 4

我捕捉click事件與jQuery的導航容器，取決於具體點擊的元素，將.jumbotron元素的background-image屬性關聯。

換句話說：

$('.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

如果你的名字你的圖像物品1，ITEM2等，下面的工作：

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