Изменение фотографии, нажав на текст

Question

У меня есть текст в списке

<ul class="1"> 
    <li class="liHEADER">ANIMALS</li> 
    <li class="animalss">LION</li> 
    <li class="animalss">TIGER</li> 
    <li class="animalss">CHEETAH</li> 
</ul> 

и у меня есть <div> для картин и этикетки

<div class="show"> 
    <div class="pic"><img src="LION.jpg"></pic> 
    <div class="labels">LION</div> 

    <div class="pic"><img src="LION.jpg"></pic> 
    <div class="labels">TIGER</div> 

    <div class="pic"><img src="LION.jpg"></pic> 
    <div class="labels">CHEETAH</div> 
</div> 

, что я собирался сделать, это когда Я нажимаю на слово LION. <div> покажет изображение льва и его метки, а затем, нажав на tiger, снимок и метка льва будут скрыты, а тигр будет показан ... любая команда javascript или jquery для этого ?

Прошу прощения, что я просто не очень хорош в этом.

Answer 1

Это моя идея:

HTML

<div class="show"> 
    <div class="pic lion"><img src="LION.jpg"></pic> 
    <div class="labels lion">LION</div> 

    <div class="pic tiger"><img src="LION.jpg"></pic> 
    <div class="labels tiger">TIGER</div> 

    <div class="pic cheetah"><img src="LION.jpg"></pic> 
    <div class="labels cheetah">CHEETAH</div> 
</div> 

Javascript

$(function(){ 
    $('.animalss').click(function(){ 
     switch($(this).text()){ 
     case 'LION': 
      $('.pic').not('.lion').hide(); 
      $('.labels').not('.lion').hide(); 
      $('.lion').show(); 
     break; 
     case 'TIGER': 
      $('.pic').not('.tiger').hide(); 
      $('.labels').not('.tiger').hide(); 
      $('.tiger').show(); 
     break; 
     case 'CHEETAH': 
      $('.pic').not('.cheetah').hide(); 
      $('.labels').not('.cheetah').hide(); 
      $('.cheetah').show(); 
     break; 
     } 
    }); 
}); 

Answer 2

Попробуйте

HTML

<label>ANIMALS</label> 
<ul class="1"> 
    <li class="animalss">LION</li> 
    <li class="animalss">TIGER</li> 
    <li class="animalss">CHEETAH</li> 
</ul> 

<div class="show"> 
<div class="lion" style="display:none"> 
    <div class="pic"><img src="LION.jpg"></div> 
    <div class="labels">LION</div> 
</div> 
<div class="tiger" style="display:none"> 
    <div class="pic"><img src="LION.jpg"></div> 
    <div class="labels">TIGER</div> 
</div> 
<div class="cheetah" style="display:none"> 
    <div class="pic"><img src="LION.jpg"></div> 
    <div class="labels">CHEETAH</div> 
</div>  
</div> 

Jquery сценария

$('ul li').on('click',function(){ 
    var text=$(this).text().toLowerCase(); 
    $('.'+text).show('slow').siblings().hide(); 
}); 

DEMO

Answer 3

// проверить решение на скрипку DEMO http://jsfiddle.net/5Ks5n/

HTML

<ul class="animal-list"> 
    <li class="liHEADER" data-view="lion">Lion</li> 
    <li class="animalss" data-view="tiger">Tiger</li> 
</ul> 

<div class="show"> 
     <div class="pic" style="display:none" data-animal="lion"> 
      <img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" /> 
     <div class="labels">LION</div> 
    </div> 

    <div class="pic" style="display:none" data-animal="tiger"> 
     <img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" /> 
     <div class="labels">TIGER</div> 
    </div> 
</div> 

Javascript

$(document).on("click",".animal-list",function(element){ 
    var $target = $(element.target); 
    var animal = $target.attr("data-view"); 
    $(".pic").hide(); 
    $("[data-animal='"+ animal +"']").show(); 
}); 

Answer 4

Простой подход:

<label>ANIMALS</label> 
    <ul class="1"> 
    <li class="animalss">LION</li> 
    <li class="animalss">TIGER</li> 
    <li class="animalss">CHEETAH</li> 
    </ul> 

    <div class="show"> 
    <div class="lion_pic" style="display:none"> 
     <img src="LION.jpg"></pic> 
     <label>LION</label> 
    </div> 
    <div class="tiger_pic" style="display:none"> 
     <img src="TIGER.jpg"></pic> 
     <label>TIGER</label> 
    </div> 
    <div class="cheetah_pic" style="display:none"> 
     <img src="CHEETAH.jpg"></pic> 
     <label>CHEETAH</label> 
    </div> 
    </div> 

JS код:

$('ul.1').click(function(e){ 
    var type = $(e.target).text(); 
    if(type === 'LION'){ 
     $('.lion_pic').show(); 
     $('.tiger_pic').hide(); 
     $('.cheetah_pic').hide(); 
    } else if(type === 'TIGER'){ 
     $('.tiger_pic').show(); 
     $('.lion_pic').hide() 
     $('.cheetah_pic').hide() 
    } else { 
     $('.cheetah_pic').show(); 
     $('.lion_pic').hide() 
     $('.tiger_pic').hide() 
    } 
    }); 

Answer 5

Самый простой, но не самый короткий способ сделать это, чтобы назначить классы для группы, группы означают элементы Wich являются взаимодействуют друг с OTER т.е. левый текст, изображение и макет в вашем случае. Затем используйте этот код:

<pre> 
<style> 
.show div{display:none;} 
</style> 
    <ul class="1"> 
     <li class="liHEADER">ANIMALS</li> 
     <li class="animalss" id = "lion" onclick="showImage(this.id);">LION</li> 
     <li class="animalss" id = "tiger" onclick="showImage(this.id);">TIGER</li> 
     <li class="animalss" id="cheetah" onclick="showImage(this.id);">CHEETAH</li> 
    </ul> 

    <div class="show"> 
     <div class="pic lion"><img src="LION.jpg"></pic> 
     <div class="labels lion">LION</div> 

     <div class="pic tiger"><img src="LION.jpg"></pic> 
     <div class="labels tiger">TIGER</div> 

     <div class="pic cheetah"><img src="LION.jpg"></pic> 
     <div class="labels cheetah">CHEETAH</div> 
    </div> 
</pre> 

Тогда JQuery будет

<pre> 
<script> 
function showImage(param){ 
    var classToShow = param; 
    $('.'+param).show(); 
    $('.show div:not("."'+param+'")').hide(); 
} 
</script> 
</pre> 

Проверка на ошибки Синтекс и дайте мне знать об этом.

Answer 6

Я переформатировал ваш HTML, так что его гораздо проще проиллюстрировать, так как я думаю, что вы можете изменить HTML-код своего сайта. Вероятно, это то, как большинство людей пишут код для Tabs.

<ul> 
    <li class="animals"><a href="#lion">LION</a></li> 
    <li class="animals"><a href="#tiger">TIGER</a></li> 
</ul> 
<div class="content"> 
    <div class="pic" id="lion"> 
     <img src="LION.jpg" /> 
     <div class="labels">LION</div> 
    </div> 
    <div class="pic" id="tiger"> 
     <img src="TIGER.jpg" /> 
     <div class="labels">TIGER</div> 
    </div> 
</div> 

и вот код JQuery,

$(".pic").hide(); 
$("a[href='#lion']").on('click', function() { 
    $(".pic").hide(); 
    $("#lion").show();  
}); 
$("a[href='#tiger']").on('click', function() { 
    $(".pic").hide(); 
    $("#tiger").show();  
}); 

каждый раз, когда мы перезагрузить страницу, мы уверены, скрыты с помощью $ ("рис"). Скрыть(). Затем, когда пользователь нажимает ссылки LION или TIGER, мы будем скрывать оба, а затем показывать только правильный div, который является либо LION, либо TIGER. Вот Working Example. Конечно, можно сделать код еще короче, абстрагировав LION и TIGER с ANIMALS (или хорошо, все, что вы хотите), но тогда для начинающих будет труднее понять.

Answer 7

Еще одно решение :)

Js Fiddler Demo here

HTML

<ul class="1"> 
    <li class="liHEADER">ANIMALS</li> 
    <li class="animalss">LION</li> 
    <li class="animalss">TIGER</li> 
    <li class="animalss">CHEETAH</li> 
</ul> 

    <div class="show"> 
    <div class="pic" data-name="lion"><img src="http://rs183.pbsrc.com/albums/x46/rebelrhoads/Lion.jpg~c200"/></div> 
<div class="labels" data-name="lion">LION</div> 

<div class="pic" data-name="tiger"><img src="http://www.perthzoo.wa.gov.au/wp-content/uploads/2011/06/Sumatran-Tiger.jpg"/></div> 
<div class="labels" data-name="tiger">TIGER</div> 

<div class="pic" data-name="cheetah"><img src="http://blog.londolozi.com/wp-content/uploads/2013/11/thumb-cheetah.jpg"/></div> 
<div class="labels" data-name="cheetah">CHEETAH</div> 
</div> 

CSS

li{ 
color:#999; 
cursor:pointer; 
} 
    li.selected{ 
    color:#000; 
} 
li:hover{ 
color:#000; 
} 

div.pic, div.labels{ 
display:none; 
} 

JavaScript

$(function(){ 
     $('li').click(showAnimal); 
}); 

function showAnimal(){ 
     $('li').removeClass('selected'); 
     $(this).addClass('selected'); 

     var animal = $(this).text(); 

     if(animal.toString().toLowerCase() == "animals") 
      $('div[data-name]').show(); 
     else{ 
      $('div.pic').hide(); 
      $('div.labels').hide(); 

      $('div[data-name=' + animal.toString().toLowerCase() + ']').show(); 
     } 
}