Fatal编程技术网
  • javascript/
  • Javascript 通过单击文本更改图片

Javascript 通过单击文本更改图片

javascript jquery html css

Javascript 通过单击文本更改图片,javascript,jquery,html,css,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> <ul>

我有一个文本列表

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

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

    
动物
狮子
老虎
猎豹
我有一个
用于图片和标签

<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
时，
将显示狮子的图片及其标签，然后，当点击
tiger
时，狮子图片和标签将被隐藏，老虎将被显示……有没有javascript或jquery命令

对不起，我只是不太擅长这个。

这是我的想法：

html

试试这个

HTML

//检查小提琴上的解决方案

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_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>
要做到这一点，最简单但不是最短的方法是将类分配给一个组，组意味着与每个oter交互的元素，即在您的案例中的狮子文字、图像和标签。然后使用以下代码：


.show div{display:none；}

    
动物
狮子
老虎
猎豹


狮子
老虎
猎豹
那么jQuery将是


函数showImage（参数）{
var classToShow=参数；
$（'.+param.show（）；
$（'.show div:not（“.”+param+”）.hide（）；
}
检查syntex错误并让我知道。

我已经重新格式化了您的HTML，以便更容易说明，因为我认为您可以更改站点的HTML。这可能是大多数人编写代码的方式

每次重新加载页面时，我们都会确保使用$（“.pic”）.hide（）隐藏。然后，当用户单击LION或TIGER链接时，我们会同时隐藏这两个链接，然后只显示正确的div，即LION或TIGER。下面是一个例子。通过将LION和TIGER抽象为动物，当然可以使代码更短（或者，你想要什么都行），但是初学者很难理解。

还有一个解决方案：）

HTML

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

查看.contains和.on（“单击”…您可以将每个图像和标题包装在一个div中，使其ID与可以使用jquery ui fadeIn（）和fadeout（）的单词匹配，从而使您的生活更轻松这可能会对您有很大帮助，但您仍然需要继续努力。这里有一个简单的示例：。您可以查看jquery office网站，了解如何使用它，但在这种情况下，您将列表元素的文本链接到一个变量，如果您想编写类似于黑狮的标签，将生成两个类，而不是一个：S。。。 
$('ul li').on('click',function(){
   var text=$(this).text().toLowerCase();
   $('.'+text).show('slow').siblings().hide();
});

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

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

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

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

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

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

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

li{
color:#999;
cursor:pointer;
 }
  li.selected{
  color:#000;
 }
li:hover{
color:#000;
}

div.pic, div.labels{
display:none;
}

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