في الواقع، هذا ليس برنامجًا تعليميًا، فأنا أقوم بعمل شيء ما عندما لا يكون لدي ما أفعله ثم أنشره ليشاركه الجميع. أتمنى ألا تتردد في تعليمي ^!^
لأنني رأيت للتو برنامج 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 صغير بعض الشيء لذا لن أنشره في الواقع، الكود الأساسي هو مجرد بضع جمل وأحتاج إلى كتابته أكثر لجعله مثاليًا. يمكن للطلاب المهتمين تنزيل كود المصدر الخاص بي مباشرة للبحث. إذا كان لديك أي أسئلة، فقط اترك لي رسالة ^!^