จริงๆ แล้วมันไม่ใช่บทช่วยสอนจริงๆ ฉันแค่ทำอะไรสักอย่างตอนที่ไม่มีอะไรทำแล้วโพสต์ให้ทุกคนได้แบ่งปัน ฉันหวังว่าคุณจะไม่ลังเลที่จะสอนฉัน^!^
เนื่องจากฉันเพิ่งเห็นบทช่วยสอนของ Yadong ซึ่งค่อนข้างคล้ายกับอันนี้ ฉันจึงคิดเกี่ยวกับมันและเขียน JS ที่ใช้เพียงย่อหน้าสั้น ๆ เท่านั้นและมันก็เสร็จสิ้น JQuery ใช้ใน Yadong ฉันรู้สึกว่าหากสิ่งที่ง่ายกว่านั้นสามารถอัปโหลดไปยัง JS ได้โดยตรง ห้องสมุดก็สามารถถูกเรียกได้เมื่อมีความต้องการจำนวนมาก
รหัส HTML หลักมีดังนี้:
<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>
สังเกต:
รหัสจาวาสคริปต์หลัก:
ฟังก์ชันหลักคือ: ผลกระทบของรายการเมนูย่อยที่เปลี่ยนไปตามรายการเมนูที่เปลี่ยนแปลง (คล้ายกับแท็บแท็บ)
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";
}
}
}
}
}
ฉันจะไม่อธิบายมากเกี่ยวกับโค้ด JS ฉันได้แสดงความคิดเห็นส่วนสำคัญแล้ว เนื่องจากฉันก็เหมือนกัน จึงต้องใช้ความพยายามอย่างมากเพื่อให้บรรลุผล และฉันหวังว่าผู้เชี่ยวชาญจะให้คำแนะนำเพิ่มเติมแก่ฉันได้
โค้ด CSS มีขนาดเล็กนิดหน่อย ดังนั้นฉันจะไม่โพสต์มัน จริงๆ แล้ว โค้ดหลักเป็นเพียงประโยคเล็กๆ น้อยๆ เท่านั้น ฉันต้องเขียนเพิ่มเติมเพื่อทำให้สมบูรณ์แบบ! นักเรียนที่สนใจสามารถดาวน์โหลดซอร์สโค้ดของฉันเพื่อการวิจัยได้โดยตรง หากคุณมีคำถามใดๆทิ้งข้อความไว้^!^