JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

本文是利用javascript脚本来实现网页中的多标签页功能。本例一共有1个主页面，6个标签页面，1个js脚本文件，1个CSS层叠式样式表文件。来实现多标签页功能，当选择某一个标签时，显示不同的标签页文件。

主页面文件(index.html):

状态栏

标签页文件:

page1.html

page2.html

page3.html

page4.html

page5.html

page6.html

这6个标签页文件可以一样，也可以稍作改动，方便测试页面的变化。

标签1页面
输入框1：

输入框2：

按钮function set() {console.log("被点击");}

js脚本文件(javascript.js):

// JavaScript Documentwindow.onload=function(){//默认为第一个页面document.getElementById('content').innerHTML = '';//获取所有input元素var aBtn = document.querySelectorAll('div input');for(var i=0;i';//把页面地址写入'content'的元素内}this.className='active';//被点击的input的className属性改为'active'，按钮样式改为白色};}};

CSS文件(style.css):

#topDiv {display: grid;grid-template-columns: 100px auto;grid-template-rows: 800px 50px;grid-column-gap: 0px;grid-row-gap: 0px;}.btn { grid-area: 1 / 1 / 2 / 2; }.content { grid-area: 1 / 2 / 2 / 3; border: solid 1px;}.status { grid-area: 2 / 1 / 3 / 3; margin: auto 100px;border: solid 1px;padding: 10px;} .inactive{border-radius: 10px 0px 0px 10px;padding: 10px 20px 10px 20px;text-decoration: none;background-color: #8080802b;}.active{border-radius: 10px 0px 0px 10px;padding: 10px 20px 10px 20px;text-decoration: none;background-color: white;}