Heim > Artikel > Web-Frontend > JS klicken Sie auf den Link, um zur Anzeige versteckter Inhalte zu wechseln

JS klicken Sie auf den Link, um zur Anzeige versteckter Inhalte zu wechseln

小云云Original: 2018-01-09 13:05:102343Durchsuche

In diesem Artikel wird hauptsächlich die JS-Methode zum Umschalten auf die Anzeige versteckter Inhalte beim Klicken auf einen Link vorgestellt, einschließlich der Reaktion auf Javascript-Mausereignisse und der dynamischen Transformation von Seitenelementattributen. Freunde in Not können sich darauf beziehen, ich hoffe, dass dies der Fall ist allen helfen.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <title>www.jb51.net 点击链接切换显示隐藏内容</title> 
 <style> 
  a { 
   cursor: pointer; 
   color: red; 
  } 
  #p1, #p2 { 
   display: none; 
  } 
 </style> 
</head> 
<body> 
 <a onclick="con(1)">显示内容1</a> 
 <a onclick="con(2)">显示内容2</a> 
 <p id="p1">11111</p> 
 <p id="p2">22222</p> 
 <script> 
  flag = "p1"; 
  function con(i){ //参数传递时传递字符串似乎有问题，这里采用的是数字传参 
   document.getElementById(flag).style.display = "none"; 
   document.getElementById("p" + i).style.display = "inline"; 
   flag = "p" + i; 
  } 
 </script> 
</body> 
</html>

Verwandte Empfehlungen:

JS implementiert die Klickzyklusumschaltung, um Inhalte anzuzeigen

Angular implementiert die Zeitplanfunktion (kann angezeigte Inhalte hinzufügen und ausblenden), ausführliche Erklärung

Implementierungsmethode für JS-Click-Cycle-Switching-Anzeigeinhalte

Das obige ist der detaillierte Inhalt vonJS klicken Sie auf den Link, um zur Anzeige versteckter Inhalte 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：Ausführliche Erläuterung der Beispiele für C#-Hintergrundimplementierungsmethoden für die Bezahlung des WeChat-MiniprogrammsNächster Artikel：Ausführliche Erläuterung der Beispiele für C#-Hintergrundimplementierungsmethoden für die Bezahlung des WeChat-Miniprogramms

In Verbindung stehende Artikel

Mehr sehen