编写自己的JavaScript学习记录导航网页，方便进行javascript的学习，方便总结

本文链接：https://blog.youkuaiyun.com/m0_51099299/article/details/126845586

这篇博客分享了如何利用CSS的float属性和iframe标签创建一个JavaScript学习导航页面，通过一个HTML文件集中展示所有JS知识点，便于学习和日后回顾。作者通过详细步骤指导如何构建导航栏，并对比了使用导航栏前后的学习效率提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习介绍：

使用css的float属性和iframe标签，创建一个JS知识点导航栏，每次学习新的JS知识，只需打开一个html页面即可查看所有练习和进行新的学习，十份方便，也便于日后的知识回顾。

css创建一个无表格的首页地址链接:
https://www.w3cschool.cn/cssref/pr-class-float.html
使用浏览器的F12快捷键，打开浏览器网页开发工具，直接使用Console控制台进行JS的编写和学习，方便快捷。
如图：
在这里插入图片描述

进入正题：

创建一个JS知识点导航栏。我练习javascript使用的是HBuilder
完成效果如图：使用html + css +js 完成
在这里插入图片描述
目录结构：

主要代码

主页代码
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>学习JS使用_xw(w3cschool.cn)</title>
    <script src="../js/menu.js"></script>
    <style>
      div.container {
        width: 100%;
        margin: 0px;
        border: 1px solid gray;

      }

      div.header,
      div.footer {
        padding: 0.5em;
        color: white;
        background-color: gray;
        clear: left;
      }

      h1.header {
        padding: 0;
        margin: 0;
      }

      div.left {
        float: left;
        width: 160px;
        margin: 0;
        padding: 1em;
      }

      div.content {
        margin-left: 190px;
        border-left: 1px solid gray;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1 class="header">w3cschool.cn_xw</h1>
      </div>
      <div class="left" id="menu"></div>
      <div class="content">
        <iframe id="content" style="height:800px;width:100%" src="https://www.w3school.com.cn/js/js_string_methods.asp"></iframe>
      </div>
      <div class="footer">版权：1999-2005年.</div>
    </div>

    <script>
      for (var i = 0; i < menus.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = menus[i].name;
        li["index"] = i;
        li.onclick = function()
        {
          // debugger;
          // var item = menus.filter(item => item.name == this.innerHTML);
          document.getElementById("content").src = menus[this.index].page;
        }
        document.getElementById("menu").append(li);
      }      
    </script>
  </body>
</html>

js代码
menu.js

var menus = [
	{
		"name":"js_1",
		"page":"js_1.html"
	},
	{
		"name":"js_使用",
		"page":"js_使用.html"
	},
	{
	    "name":"js_输出",
	    "page":"js_输出.html"
	  }
]