Heim > Artikel > Web-Frontend > So verwenden Sie JavaScript, um die gemeinsame Nutzung von Beispielcode für die Navigationsleiste zu implementieren
So verwenden Sie JavaScript, um die gemeinsame Nutzung von Beispielcode für die Navigationsleiste zu implementieren
- 黄舟Original
- 2017-07-25 09:22:182108Durchsuche
Verwenden Sie js, um eine einfache Navigationsleiste zu implementieren. Schritte zur Verwendung von js, um einen bestimmten Effekt zu erzielen: 1. CSS-Layout implementieren; 2: JS-Implementierungsprinzip; 3. CSS-Code schreiben;
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
ul {
padding:0px;
margin:0px;
list-style:none;
}
a {
text-decoration:none;
background-color:#f1f1f1;
display:block;
width:50px;
text-align:center;
}
.list {
display:none;
}
ul ul{
width:140px;
border:solid #000 1px;
position:absolute;
}
ul ul li {
text-align:center;
}
.item {
position:relative;
}
</style>
</head>
<body>
<ul>
<li class="item" id="item">
<a href="#" id="link">微博</a>
<ul class="list" id="list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul></body><script>
var link = document.getElementById("link");
var item = document.getElementById("item");
var list = document.getElementById("list");
item.onmouseover = show;
item.onmouseout = hide; function show(){
list.style.display = "block";
link.style.background = "yellow";
} function hide(){
list.style.display = "none";
}</script></html>JS-Methode zum Entfernen eines Elements aus der Ansicht:
(1)display:none;(belegt den Dokumentfluss nicht)
(2)visibility:hidden;(ein Element ausblenden Elemente, die immer noch den Dokumentfluss belegen)
(3) Setzen Sie die Transparenz auf 0, d. h. opacity:0; (Im IE-Browser kann die Transparenz wie folgt eingestellt werden: alpha(opacity=0);)
(4) Legen Sie den Randwert fest, setzen Sie den Randwert beispielsweise auf einen negativen Wert
(5) Ändern Sie durch overflow:hidden; und relative Positionierung die linken und oberen Werte, um die Position zu verschieben des Elements
(6) Durch ein weißes p wird dieses darüber liegende p entfernt.
……
Ereignisse in js: Mausereignisse, Tastaturereignisse, Systemereignisse, Formularereignisse, benutzerdefinierte Ereignisse usw. Zu den üblichen Mausereignissen gehören: onmouseover, onmouseout, onmousemove, onclick, onmounseup, Mousedown usw. Funktionsaufrufmethoden: Ereignisaufruf, anonymer Aufruf, direkter Aufruf.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um die gemeinsame Nutzung von Beispielcode für die Navigationsleiste zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!