ex_softwaredesign/section.html at master · byy811/ex_softwaredesign · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>要看哪一节呢</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container" id="section-container">
        <!-- 章节小节选项将通过 JavaScript 动态加载 -->
    </div>

    <script>
        // 获取URL中的章节参数
        const urlParams = new URLSearchParams(window.location.search);
        const chapter = urlParams.get('chapter');

        // 定义各个章节及其小节
        const sections = {
            1: [
                { id: 1, title: '1.1', description: ' ' },
                // { id: 2, title: '第二小节', description: '描述第一章的第二小节' }
            ],
            2: [
                { id: 1, title: '2.1', description: ' ' },
                // { id: 2, title: '第二小节', description: '描述第二章的第二小节' }
            ],
            3: [
                { id: 1, title: '3.1', description: ' ' },
                // { id: 2, title: '第二小节', description: '描述第一章的第二小节' }
            ],
            4: [
                { id: 1, title: '4.1', description: ' ' },
                // { id: 2, title: '第二小节', description: '描述第二章的第二小节' }
            ],
            5: [
                { id: 1, title: '5.1', description: ' ' },
            ],
            6: [
                { id: 1, title: '6.1', description: ' ' },
            ],
            7: [
                { id: 1, title: '7.1', description: ' ' },
            ],
            8: [
                { id: 1, title: '8.1', description: ' ' },
            ],
            9: [
                { id: 1, title: '9.1', description: ' ' },
            ],
            10: [
                { id: 1, title: '10.1', description: ' ' },
            ],
            11: [
                { id: 1, title: '11.1', description: ' ' },
            ],
            12: [
                { id: 1, title: '12.1', description: ' ' },
            ],
            13: [
                { id: 1, title: '13.1', description: ' ' },
            ]
        };

        // 获取小节容器
        const sectionContainer = document.getElementById('section-container');

        // 根据章节显示小节
        if (sections[chapter]) {
            sections[chapter].forEach(section => {
                const sectionBox = document.createElement('div');
                sectionBox.className = 'section-box';
                sectionBox.onclick = () => location.href = `note.html?c=${chapter}&s=${section.id}`;
                sectionBox.innerHTML = `<h2>${section.title}</h2><p>${section.description}</p>`;
                sectionContainer.appendChild(sectionBox);
            });
        } else {
            sectionContainer.innerHTML = '<p>未找到相关小节</p>';
        }
    </script>
</body>
</html>