通过单击文本更改图片

时间：2013-12-18 06:47:40

标签： javascript jquery html css

我在列表中有文字

<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时狮子pic和标签将被隐藏，老虎将被显示...任何javascript或jquery命令为此？

对不起，我对此并不擅长。

7 个答案:

答案 0 :(得分：1)

又一个解决方案：）

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

答案 1 :(得分：0)

这是我的想法：

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

答案 2 :(得分：0)

试试这个

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

答案 3 :(得分：0)

//检查小提琴上的解决方案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();
});

答案 4 :(得分：0)

简单方法：

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

答案 5 :(得分：0)

最容易但不是最短的方法来将类分配给一个组，组是指与每个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>

检查syntex错误并告诉我。

答案 6 :(得分：0)

我重新格式化了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();    
});

每次我们重新加载页面时，我们都会确保使用$（＆＃34; .pic＆＃34;）隐藏（hide）。然后，当用户单击LION或TIGER链接时，我们将隐藏两者，然后仅显示正确的div，即LION或TIGER。这是一个Working Example。通过将LION和TIGER抽象为ANIMALS（或者你想要的任何东西），当然可以缩短代码，但是对初学者来说更难理解。

相关问题
最新问题