1. 首頁
  2. 問答
  3. 通過點擊文本

通過點擊文本

2013-12-18 69 views
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的命令爲此？

對不起，我只是不太擅長這個。

來源

2013-12-18 SHSHSHSHS

+0

看看。載和。對（「點擊」 ...你可以讓你的生活更容易通過與ID一個div是 – mplungjan

+0

你可以使用jQuery UI的匹配單詞每個包裹圖片和標題fadeIn（）和fadeout（）可以幫助你很多，但是你仍然需要在這裏做一個簡單的例子：http://www.w3school.com.cn/tiy/t.asp?f=jquery_effect_fadeout_fadein。你可以檢查jQuery的辦公室網站，看看如何使用它 –

回答

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

來源

2013-12-18 06:59:30 HICURIN

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

來源

2013-12-18 07:01:05

+0

但在這種情況下，你正在鏈接列表元素的文本到一個變量如果你想寫的東西像黑獅子作爲一個標籤，將使兩個類而不只是一個：S ... – ncubica

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

來源

2013-12-18 07:03:33 ncubica

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

來源

2013-12-18 07:10:28 ram

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錯誤，讓我知道這件事。

來源

2013-12-18 07:12:33

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

每次我們重新載入頁面，我們要確保的是使用隱藏$（ 「PIC」）。隱藏（）。然後，當用戶點擊LION或TIGER鏈接時，我們將隱藏這兩個鏈接，然後只顯示正確的div，它是LION或TIGER。這是一個Working Example。通過將LION和TIGER抽象爲動物（或者任何你想要的），使得代碼更加簡短是可能的，但對於初學者來說，這將更難理解。

來源

2013-12-18 07:12:54

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

來源

2013-12-18 07:15:44 Leo

相關問題

 相關問題