Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Funktion des gleichzeitigen Umschaltens von Symbolen mit jQuery

Ausführliche Erläuterung der Funktion des gleichzeitigen Umschaltens von Symbolen mit jQuery

小云云Original: 2018-05-14 16:02:372243Durchsuche

In diesem Artikel wird jQuery hauptsächlich vorgestellt, um die Funktion des gleichzeitigen Umschaltens zwischen Ausblenden und Anzeigen und Wechseln von Symbolen zu realisieren. Ich hoffe, es kann jedem helfen.

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

Verwandte Empfehlungen:

Anleitung Verwenden Sie JS, um zwischen dem Ausblenden und Anzeigen sowie dem gleichzeitigen Wechseln von Symbolen zu wechseln.

Zwei JS-Methoden zum Implementieren des Hinzufügens kleiner Symbole in der Eingabe

Detaillierte Erklärung der CSS-Implementierung der Maus zum Übertragen des Symbolrotationseffekts

Einführung in die Anzeige kleiner Symbole in der Browser-Titelleiste von HTML-Webseiten

jquery steuert die absolute Positionierung von CSS. Effekte, z. B. Bewegen der Maus auf die Symbolanzeigeebene, um relevante Informationen anzuzeigen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Funktion des gleichzeitigen Umschaltens von Symbolen mit jQuery. 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 gehen Sie mit der leeren Anzeige um, nachdem Vue gepackt wurdeNächster Artikel：So gehen Sie mit der leeren Anzeige um, nachdem Vue gepackt wurde

In Verbindung stehende Artikel

Mehr sehen