首页利用JavaScript书写代码并用HTML格式:制作一个以大学知识为基础的学习网站

利用JavaScript书写代码并用HTML格式:制作一个以大学知识为基础的学习网站

时间: 2024-03-15 15:46:41 浏览: 107

好的，以下是一个以大学知识为基础的学习网站的示例代码： HTML文件（index.html）： ``` <!DOCTYPE html> <html> <head> <title>大学知识学习网站</title> <script src="script.js"></script> </head> <body> <header> <h1>大学知识学习网站</h1> <nav> <ul> <li><a href="#" onclick="showTopic('math')">数学</a></li> <li><a href="#" onclick="showTopic('physics')">物理</a></li> <li><a href="#" onclick="showTopic('chemistry')">化学</a></li> </ul> </nav> </header> <main> <section id="math"> <h2>数学</h2> <p>这里是数学部分的介绍。</p> <ul> <li><a href="#">微积分</a></li> <li><a href="#">线性代数</a></li> <li><a href="#">概率统计</a></li> </ul> </section> <section id="physics"> <h2>物理</h2> <p>这里是物理部分的介绍。</p> <ul> <li><a href="#">力学</a></li> <li><a href="#">热学</a></li> <li><a href="#">电磁学</a></li> </ul> </section> <section id="chemistry"> <h2>化学</h2> <p>这里是化学部分的介绍。</p> <ul> <li><a href="#">无机化学</a></li> <li><a href="#">有机化学</a></li> <li><a href="#">物理化学</a></li> </ul> </section> </main> </body> </html> ``` JavaScript文件（script.js）： ``` function showTopic(topicId) { // 隐藏所有主题 var sections = document.getElementsByTagName("section"); for (var i = 0; i < sections.length; i++) { sections[i].style.display = "none"; } // 显示指定的主题 var topic = document.getElementById(topicId); topic.style.display = "block"; } ``` 这个网站包含一个标题、一个导航菜单和三个主题部分。点击导航菜单上的链接会显示相应的主题部分。JavaScript函数`showTopic`用于显示指定的主题，并隐藏其他主题。每个主题部分包含一个简短的介绍和一个包含课程链接的列表。

阅读全文