suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie JS, um gleichzeitig zwischen dem Ausblenden und Anzeigen von Symbolen zu wechseln

So verwenden Sie JS, um gleichzeitig zwischen dem Ausblenden und Anzeigen von Symbolen zu wechseln

php中世界最好的语言
php中世界最好的语言Original
2017-12-31 11:35:583748Durchsuche

Was ich Ihnen dieses Mal zeige, ist, wie Sie mit JS gleichzeitig zwischen dem Ausblenden und Anzeigen von Symbolen wechseln können. Dieser Artikel gibt Ihnen eine gute Analyse.

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

JS-Code: 

$(document).ready(function(){
//通过id="ctr"获取元素click事件
   $("#ctr").click(function(){
//将显示和隐藏两个状态下的显示图标路径放入images变量中
    var images=[&#39;./images/01.jpg&#39;,&#39;./images/02.jpg&#39;];
//通过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);
  });  
});

Ich glaube, dass Sie die Methode nach dem Lesen der obigen Einführung beherrschen. Für weitere spannende Informationen zahlen Sie bitte Achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Verwandte Lektüre:

Wie kann Ajax lokales JSON lesen?

Wie man Vue verwendet, um die Anmeldebestätigung zu implementieren

Verwenden Sie jQuery, um Arrays zu deduplizieren und zu sortieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS, um gleichzeitig zwischen dem Ausblenden und Anzeigen von Symbolen zu wechseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So deaktivieren und aktivieren Sie Schaltflächen mit JSNächster Artikel：So deaktivieren und aktivieren Sie Schaltflächen mit JS

In Verbindung stehende Artikel

Mehr sehen