30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
// 1. 点击学习阶段节点，显示对应课程面板
|
||
document.querySelectorAll('.step-node').forEach((node) => {
|
||
node.addEventListener('click', function () {
|
||
// 隐藏所有面板
|
||
document.querySelectorAll('.course-panel').forEach(panel => {
|
||
panel.classList.remove('active');
|
||
});
|
||
// 获取当前阶段名称，匹配面板ID
|
||
const stepTitle = this.closest('.path-step').querySelector('.step-title').textContent;
|
||
const panelId = stepTitle.toLowerCase().replace(' ', '-') + '-panel';
|
||
const targetPanel = document.getElementById(panelId);
|
||
// 显示对应面板（若存在）
|
||
if (targetPanel) {
|
||
targetPanel.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 2. 关闭课程面板
|
||
document.querySelectorAll('.close-panel').forEach(button => {
|
||
button.addEventListener('click', function () {
|
||
this.closest('.course-panel').classList.remove('active');
|
||
});
|
||
});
|
||
|
||
// 3. 切换专业方向（可扩展为动态更新学习路径）
|
||
document.getElementById('majorSelect').addEventListener('change', function () {
|
||
const selectedMajor = this.options[this.selectedIndex].text;
|
||
// 实际项目中可替换为AJAX请求，加载对应专业的学习路径
|
||
}); |