根据点击哪个菜单项来更改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)'); 
})