コードは非常に簡潔で理解しやすいので、これ以上ナンセンスはありません。
コードを直接提示します：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text/html" charset = "utf-8">
<title> js simple tab </title>
<script type = "text/javascript" src = "js/demo.js"> </scrip>
<style type = "text/css">
*{font-size：14px;マージン：0px;}
A {color：＃a0b3d6;テキスト装飾：なし;}
.tabs {border：1px solid＃a0b3d6;マージン：100px;幅：350px;}
.tabs-nav a {background：＃eaf0fd;ラインハイト：30px;パディング：0px 20px 0px 20px;ディスプレイ：インラインブロック;境界線右：1pxソリッド＃a0b3d6;ボーダーボトム：1px solid＃a0b3d6;フロート：左;}
.tabs-nav .on {background：white;境界線：1pxの固体白。位置：相対;}
.tabs-content {display：block;パディング：20px;ボーダートップ：1pxソリッド＃a0b3d6;マージントップ：-1px;}
.tabs-content_hide {display：none;}
</style>
</head>
<body>
<div id = "tabs">
<h2>
<a href = "javascript：;"> home </a>
<a href = "javascript：;">テクノロジー</a>
<a href = "javascript：;"> life </a>
<a href = "javascript：;"> works </a>
</h2>
<div style = "clear：bloth;"> </div>
<p> home </p>
<p>テクノロジー</p>
<p> life </p>
<p>作業</p>
</div>
</body>
<フッター> </footer>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
コードコピーは次のとおりです。
window.onload = function（）{
タブ（ "Tabs"、 "Mouseover"）;
}
関数タブ（ID、トリガー）{
var tabbtn = document.getElementById（id）.getElementsByTagname（ "h2"）[0] .getElementsByTagname（ "a"）;
var tabscontent = document.getElementById（id）.getElementsByTagname（ "P"）;
for（var i = 0; i <tabbtn.length; i ++）{
tabbtn [i] .index = i;
if（trigger == 'mouseover'）{
tabbtn [i] .onmouseover = function（）{
ClearClass（）;
this.classname = "on";
showcontent（this.index）;
}
}
関数showcontent（n）{
for（var i = 0; i <tabscontent.length; i ++）{
tabScontent [i] .index = i;
tabscontent [i] .classname = "tabs-content_hide";
}
tabScontent [n] .classname = "tabs-content";
}
関数ClearClass（）{
for（var i = 0; i <tabbtn.length; i ++）{
tabbtn [i] .classname = "";
}
}
}
}
タブの切り替え効果を実現するのは非常に簡単ですか？友達はそれを美化した後、自分のプロジェクトでそれを使用できます。