Изменение картинок нажатием на текст

Question

Изменение картинок нажатием на текст

0

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

<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 для этого?

Мне жаль, что я просто не очень хорош в этом.

SHSHSHSHS 18 дек. 2013, в 08:32

Источник

0

Посмотрите на .contains и .on ("click" ... Вы можете упростить свою жизнь, обернув каждое изображение и подпись в div с идентификатором, соответствующим слову
mplungjan 18 дек. 2013, в 06:50
0

Вы можете использовать jquery ui, fadeIn () и fadeout () могут вам сильно помочь, но все же вам нужно поработать над этим, вот простой пример: w3school.com.cn/tiy/t.asp?f=jquery_effect_fadeout_fadein . и вы можете проверить веб-сайт JQuery Office, чтобы увидеть, как его использовать
F.C.Hsiao 18 дек. 2013, в 07:00

Теги:

javascript

jquery

html

css

7 ответов

Ещё вопросы

Посмотрите на .contains и .on ("click" ... Вы можете упростить свою жизнь, обернув каждое изображение и подпись в div с идентификатором, соответствующим слову
Вы можете использовать jquery ui, fadeIn () и fadeout () могут вам сильно помочь, но все же вам нужно поработать над этим, вот простой пример: w3school.com.cn/tiy/t.asp?f=jquery_effect_fadeout_fadein . и вы можете проверить веб-сайт JQuery Office, чтобы увидеть, как его использовать

Leo · Answer 1 · 2013-12-18T05-16-00.000Z

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

Демо-версия Js Fiddler здесь

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();
        }
}

Sridhar R · Answer 2 · 2013-12-18T05-57-00.000Z

Попробуй это

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

Но в этом случае вы связываете текст элемента списка с переменной, что если вы захотите написать что-то вроде BLACK LION в качестве метки, которая создаст два класса вместо одного: S ...

ram · Answer 3 · 2013-12-18T05-50-00.000Z

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

  <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()
    }
  });

quik_silv · Answer 4 · 2013-12-18T05-38-00.000Z

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

<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();    
});

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

HICURIN · Answer 5 · 2013-12-18T05-32-00.000Z

Это моя идея:

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;
      }
    });
});

ncubica · Answer 6 · 2013-12-18T04-48-00.000Z

//проверяем решение на скрипке 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();
});

Umair Hamid · Answer 7 · 2013-12-18T04-38-00.000Z

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

 <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>

Проверьте на ошибку syntex и сообщите мне об этом.