利用JavaScript书写代码并用HTML格式:制作一个简易的学习网站
时间: 2024-03-15 13:46:28 浏览: 28
好的,以下是一个简单的学习网站的示例代码:
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="showLesson('lesson1')">课程1</a></li>
<li><a href="#" onclick="showLesson('lesson2')">课程2</a></li>
<li><a href="#" onclick="showLesson('lesson3')">课程3</a></li>
</ul>
</nav>
</header>
<main>
<section id="lesson1">
<h2>课程1</h2>
<p>这是第一门课程的介绍。</p>
</section>
<section id="lesson2">
<h2>课程2</h2>
<p>这是第二门课程的介绍。</p>
</section>
<section id="lesson3">
<h2>课程3</h2>
<p>这是第三门课程的介绍。</p>
</section>
</main>
</body>
</html>
```
JavaScript文件(script.js):
```
function showLesson(lessonId) {
// 隐藏所有课程
var sections = document.getElementsByTagName("section");
for (var i = 0; i < sections.length; i++) {
sections[i].style.display = "none";
}
// 显示指定的课程
var lesson = document.getElementById(lessonId);
lesson.style.display = "block";
}
```
这个网站包含一个标题、一个导航菜单和三个课程部分。点击导航菜单上的链接会显示相应的课程部分。JavaScript函数`showLesson`用于显示指定的课程,并隐藏其他课程。