クリックしたメニュー項目に応じてDIV背景イメージを変更します。

Question

私は背景イメージを持つクラスジャンボトロンでdivを持っています。

私は6項目のメニューもあります。

クリックしたメニュー項目に応じて、ジャンボトロンの背景イメージを変更するにはjavascriptまたはjQueryを使用します。各メニュー項目には、.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

それらは背景画像を変更するをクリックしているときだけ、各元素のクリックハンドラを追加します。

タブに関するその他の情報を使用する場合は、参照可能な属性（URLに必要なもの）をdata個追加することがあります。

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

私はjQueryを使ってのnavコンテナのclickイベントをキャプチャしたい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

を使用することができ、かつ特定のクリックされた要素に応じて、.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クラスを定義すると、1つまたはリンクがクリックされたかに応じて別のを切り替えることであろう。

Answer 5

Nice 'n easy。 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)'); 
})