jQuery implementiert das Anzeigen und Ausblenden von Symbolen-js-Tutorial-php.cn

jQuery implementiert das Anzeigen und Ausblenden von Symbolen

php中世界最好的语言

Freigeben： 2018-04-19 14:13:22

Original

2538 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit jQuery die Anzeige und das Ausblenden von Symbolen implementieren.

HTML-Code:

JS-Code:

<!doctype html>
<html>
<head> 
<meta charset=" utf-8"> 
<title>jq隐藏显示图标切换</title>
 <!--引入jq文件-->
<script type="text/javascript" scr="./js/jquery.min.js"></script>
</head>
<body>
<!--隐藏／显示 控制按钮-->
<p><img id="ctr" scr="./images/01.jpg"></p>
<!--被控制元素-->
<p id="info" style="display:none;">这里是要显示或隐藏的内容</p>
</body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

$(document).ready(function(){
//通过id="ctr"获取元素click事件
   $("#ctr").click(function(){
//将显示和隐藏两个状态下的显示图标路径放入images变量中
    var images=['./images/01.jpg','./images/02.jpg'];
//通过class的值来判断控制显示的图标样式
    if($("#ctr").attr("class")=="down"){
    $("#ctr").attr("src",images[0]);
    $("#ctr").removeClass();
    }else{
    $("#ctr").attr("src",images[1]);
    $("#ctr").addClass("down");
    }
//用于控制元素的隐藏或显示 主要方法toggle(),300是控制元素显示或隐藏的速度
    $("#info").toggle(300);
  });  
});

Nach dem Login kopieren

Empfohlene Lektüre:

Detaillierte Schritte zur Bedienung des Faltpanel-Akkordeons durch jQuery EasyUI

Wie jQuery EasyUI Tab-Panel-Registerkarten bedient

JQuery-Aktionslistensoldaten, um dynamisch neue Elemente hinzuzufügen

Das obige ist der detaillierte Inhalt vonjQuery implementiert das Anzeigen und Ausblenden von Symbolen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!