Tutorial zum Erstellen einer exquisiten Alipay-Navigationsleiste

Eigentlich ist es kein Tutorial, ich mache einfach etwas, wenn ich nichts zu tun habe, und poste es dann, damit es jeder teilen kann^!^

Da ich gerade Yadongs Tutorial gesehen hatte, das diesem etwas ähnelte, dachte ich darüber nach und schrieb ein JS, das nur einen kurzen Absatz verwendete, und es war fertig. JQuery wird in Yadong verwendet. Ich denke, wenn etwas Einfacheres direkt in JS hochgeladen werden kann, kann die Bibliothek aufgerufen werden, wenn eine große Nachfrage besteht.

Der Kern-HTML-Code lautet wie folgt:

<div id="menu">
<div id="top"><!–橙色菜单项部分：此标签作用在于滑动门效果的实现—>
<ul id="item"><!–列表项li可自由添加与修改–>
<li id="item1"><a href="#"><span>前端开发</span></a></li>
<li id="item2" class="active"><a href="#"><span>我要付款</span></a></li>
<li id="item3"><a href="#"><span>网站开发</span></a></li>
<li id="item4"><a href="#"><span>交易管理</span></a></li>
<li id="item5"><a href="#"><span>我的支付宝</span></a></li>
<li id="item6"><a href="#"><span>安全中心</span></a></li>
<li id="item7"><a href="#"><span>商家服务</span></a></li>
<li class="ext1"></li><!–额外的标签用于定位菜单项右上圆角–>
</ul>
</div>
<div id="bot"><!–灰色子菜单项部分：此标签作用也在于滑动门效果的实现–>
<ul class="sub-item" id="sub-item1">
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>JavaScript</span></a></li>
<li><a href="#"><span>ActionScript</span></a></li>
<li><a href="#"><span>Photoshop</span></a></li>
<li><a href="#"><span>Fireworks</span></a></li>
<li><a href="#"><span>Flash</span></a></li>
<li class="ext2"></li><!–额外的标签用于定位菜单项右下圆角–>
</ul>
</div>
</div>

Beachten:

1. Menüpunkte können frei erweitert werden, indem das Red-List-Label mit dem Klassennamen „sub-item“ in den Code kopiert wird. Das heißt, kopieren Sie den gesamten Inhalt des ul-Tags und fügen Sie ihn anschließend ein.
2. Fügen Sie einfach das id-Attribut des Listen-Tags ul mit dem Klassennamen „sub-item“ der Reihe nach hinzu, z. B.: sub-item1, sub-item2, sub-item3 ...
3. Die blaue Listenbeschriftung mit dem Klassennamen „aktiv“ stellt beim Laden den Standardmenüpunkt dar.

Kern-JavaScript-Code:

Die Hauptfunktion besteht darin, dass sich die Untermenüelemente ändern, wenn sich die Menüelemente ändern (ähnlich wie bei der Registerkarte „Tab“).

window.onload = function() {
for( i=1; i<8; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
for( n=0; n<6; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示，否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}

Ich werde nicht viel über den JS-Code erklären, ich habe die wichtigen Teile bereits kommentiert. Da ich genauso bin, war es sehr anstrengend, den Effekt zu erzielen, und ich hoffe, dass Experten mir weitere Ratschläge geben können.

Der CSS-Code ist etwas klein, daher werde ich ihn nicht veröffentlichen. Tatsächlich besteht der Kerncode nur aus ein paar Sätzen, um ihn perfekt zu machen. Interessierte Studierende können meinen Quellcode für Recherchezwecke direkt herunterladen. Wenn Sie Fragen haben, hinterlassen Sie mir einfach eine Nachricht^!^