CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SHSHSHSHS
SHSHSHSHS

Reputation: 1

Changing pictures by clicking on a text

I have a text on a list

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

and I have a <div> for the pictures and the labels

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

what I was intending to do is when I click on the word LION the <div> will show the picture of the lion and its label and then, when clicked on the tiger the lion pic and label will be hidden and the tiger will be shown...any javascript or jquery command for this?

I'm sorry I just not very good at this.

Upvotes: 0

Views: 487

Answers (7)

Leo
Leo

Reputation: 14850

Yet another solution :)

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

Upvotes: 1

quik_silv
quik_silv

Reputation: 2437

I have reformatted your HTML so that its much easier to illustrate since I think maybe you are able to change the HTML of your site. This is perhaps how most people write code for 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>

and here is the jQuery code,

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

everytime we reload the page, we make sure the are hidden using $(".pic").hide(). Then when the user clicks LION or TIGER links, we will hide both and then show only the correct div, which is either LION or TIGER. Here is a Working Example. It is certainly possible to make the code even shorter by abstracting LION and TIGER to ANIMALS (or well, anything you want), but then it will be harder to understand for beginners.

Upvotes: 0

Umair Hamid
Umair Hamid

Reputation: 3557

The easiest but not shortest way to do this to assign classes to a group, group mean elements wich are interact with each oter i.e. lion text, image and lable in your case. Then use this code:

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

Then jQuery will be

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

Check for syntex error and let me know about it.

Upvotes: 0

Dhanu Gurung
Dhanu Gurung

Reputation: 8860

Simple approach:

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

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

Upvotes: 0

ncubica
ncubica

Reputation: 8495

//check the solution on fiddle 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();
});

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

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 Script

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

DEMO

Upvotes: 0

Ringo
Ringo

Reputation: 3967

This is my idea:

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

Upvotes: 0

Related Questions