通过单击文本更改图片
Changing pictures by clicking on a text
我在列表中有文本
<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命令？
对不起，我只是不太擅长这个。
另一种解决方案:)
Js 小提琴手演示在这里
.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();
}
}
这是我
的想法：
.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;
}
});
});
试试这个
.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();
});
演示
//检查小提琴演示的解决方案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>
爪哇语
$(document).on("click",".animal-list",function(element){
var $target = $(element.target);
var animal = $target.attr("data-view");
$(".pic").hide();
$("[data-animal='"+ animal +"']").show();
});
简单的方法：
<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()
}
});
最简单但不是最短的方法是将类分配给一个组，组的意思元素与每个 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>
检查语法错误并让我知道它。
我已经重新格式化了您的 HTML，以便更容易说明，因为我认为您可能能够更改您网站的 HTML。 这也许是大多数人为 Tab 编写代码的方式。
<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（） 隐藏。 然后，当用户单击狮子或老虎链接时，我们将隐藏两者，然后只显示正确的div，即狮子或老虎。 这是一个工作示例。 通过将 LION 和 TIGER 抽象为 ANIMALS（或者你想要的任何东西）当然可以使代码更短，但对于初学者来说，这将更难理解。
相关文章：
- 将纯文本URL转换为可单击链接
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 可单击滚动图像以显示文本框
- 如何通过单击html按钮获得h1的文本值
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- JavaScript-onClick将按钮ID或单击按钮的文本传递给函数
- 单击文本时删除文本框的默认数据
- 单击时将文本的颜色更改为随机颜色(按钮）
- 单击select'时将数组行回显到文本区域中;s选项
- 在动态crm 2011中，右键单击已完成活动的只读文本时，您是否出现错误
- 树形结构，显示结构中单击的元素的文本
- 在显示/隐藏中单击时删除的文本
- 获取中继器控件ASP.Net中显示的单击项目文本框
- 单击时从表单中删除特定文本
- 单击下拉菜单时，将文本粘贴到输入框中
- 将按钮文本从“;喜欢“;至“;喜欢“;单击时
- 在输入中添加文本单击
- 如何更改下拉列表标签文本单击
- 如何根据行量角器中的文本单击表中的链接
- Javascript清除文本框中预先输入的文本单击
