この記事では、JavaScriptのタブスイッチング原理と方法の原理と効果の実装について説明します。参照のためにそれを共有してください。
特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<style type = "text/css">
#container {border：solid 1px green; width：300px; height：300px;}
li {float：左;マージン左：20px;}
p {float：左;}
＃スポーツ、＃軍、＃bbs {display：none;}
</style>
<script type = "text/javascript">
関数タブ（PID）{
var ps = ['news'、 'sports'、 'military'、 'bbs'];
for（var i = 0、len = ps.length; i <len; i ++）{
if（ps [i] == pid）{
document.getElementById（ps [i]）。style.display= "block";
}それ以外{
document.getElementById（ps [i]）。style.display= "none";
}
}
}
</script>
</head>
<body>
<div id = "container">
<ul>
<li onmouseover = "tab（ 'news'）;"> news </li>
<li onmouseover = "tab（ 'sports'）;"> sports </li>
<li onmouseover = "tab（ 'military'）;">軍事</li>
<li onmouseover = "tab（ 'bbs'）;"> forum </li>
</ul>
<p id = "news"> News NewsNews News </p>
<P id = "Sports">スポーツスポーツスポーツ</p>
<p id = "軍事">軍事軍事軍事軍</p>
<p id = "bbs">フォーラムフォーラムフォーラムフォーラムフォーラム</p>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。