suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie JS, um beim Klicken auf einen Link auf die Anzeige versteckter Inhalte umzuschalten

So implementieren Sie JS, um beim Klicken auf einen Link auf die Anzeige versteckter Inhalte umzuschalten

黄舟
黄舟Original
2017-10-19 10:46:462282Durchsuche

In diesem Artikel wird hauptsächlich die JS-Methode zum Umschalten zur Anzeige versteckter Inhalte durch Klicken auf einen Link vorgestellt, einschließlich der Reaktion auf Javascript-Mausereignisse und der dynamischen Transformation von Seitenelementattributen. Bedürftige Freunde können sich auf das Folgende beziehen

In diesem Artikel werden die Beispiele erläutert. Verwenden Sie JS, um die Methode zu implementieren, bei der auf einen Link geklickt wird, um zur Anzeige versteckter Inhalte zu wechseln. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt: 


<!DOCTYPE html>
<html lang="en">
<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>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie JS, um beim Klicken auf einen Link auf die Anzeige versteckter Inhalte umzuschalten. 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：Eine detaillierte Einführung in grundlegende Datentypen in der JS-EntwicklungNächster Artikel：Eine detaillierte Einführung in grundlegende Datentypen in der JS-Entwicklung

In Verbindung stehende Artikel

Mehr sehen