Tutorial membuat bilah navigasi Alipay yang indah

Sebenarnya, ini bukanlah sebuah tutorial. Saya hanya membuat sesuatu ketika saya tidak ada pekerjaan dan kemudian mengeposkannya agar semua orang dapat membagikannya

Karena saya baru saja melihat tutorial Yadong yang agak mirip dengan ini, saya memikirkannya dan menulis JS yang hanya menggunakan paragraf pendek dan selesai. JQuery digunakan di Yadong. Saya rasa jika sesuatu yang lebih sederhana bisa langsung diupload ke JS, maka perpustakaannya bisa dipanggil ketika ada permintaan yang besar.

Kode HTML intinya adalah sebagai berikut:

<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>

Melihat:

1. Item menu dapat diperluas secara bebas dengan menyalin label daftar merah dengan nama kelas "sub-item" dalam kode. Artinya, salin semua isi tag ul dan tempel setelahnya.
2. Cukup tambahkan atribut id pada tag list ul dengan nama kelas "sub-item" secara berurutan, seperti: sub-item1, sub-item2, sub-item3...
3. Label daftar biru dengan nama kelas "aktif" mewakili item menu default saat memuat.

Kode JavaScript inti:

Fungsi utamanya adalah: efek perubahan item submenu seiring perubahan item menu (mirip dengan tab 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";
}
}
}
}
}

Saya tidak akan menjelaskan banyak tentang kode JS, saya sudah mengomentari bagian-bagian penting. Karena saya juga sama, butuh banyak usaha untuk mencapai efeknya, dan saya berharap para ahli dapat memberi saya lebih banyak nasihat.

Kode CSSnya agak kecil jadi saya tidak akan mempostingnya. Sebenarnya kode intinya hanya beberapa kalimat saja. Saya perlu menulis lebih banyak lagi agar sempurna! Mahasiswa yang berminat bisa langsung mendownload source code saya untuk penelitian. Jika Anda memiliki pertanyaan, tinggalkan pesan kepada saya^!^