Код довольно краткий и простой для понимания, поэтому больше нет чепухи.
Непосредственно представьте код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html" charset = "utf-8">
<Title> JS Simple Tab </title>
<script type = "text/javascript" src = "js/demo.js"> </script>
<стиль типа = "text/css">
*{font-size: 14px; margin: 0px;}
a {color:#a0b3d6; Text-Decoration: none;}
.tabs {Border: 1px Solid #a0b3d6; Margin: 100px; ширина: 350px;}
.tabs-nav a {founale:#eaf0fd; Линия-высота: 30px; прокладка: 0px 20px 0px 20px; дисплей: встроенный блок; граница правом: 1px solid #a0b3d6; border-bottom: 1px solid #a0b3d6; float: слева;}
.tabs-nav .on {founale: White; Пограничный подвод: 1px сплошной белый; позиция: относительно;}
.tabs-content {display: block; Подкладка: 20px; пограничная топ: 1px soluts #a0b3d6; маржинальная версия: -1px;}
.tabs-content_hide {display: none;}
</style>
</head>
<тело>
<div id = "вкладки">
<h2>
<a href = "javaScript :;"> Home </a>
<a href = "javascript :;"> Технология </a>
<a href = "javascript :;"> Life </a>
<a href = "javascript :;"> работает </a>
</h2>
<div style = "clear: оба;"> </div>
<p> Главная </p>
<p> Технология </p>
<p> Жизнь </p>
<p> работает </p>
</div>
</body>
<нижний колонтитул> </нижний колонтитул>
</html>
----------------------------------------------------------------------------------------------------------------------------
Кода -копия выглядит следующим образом:
window.onload = function () {
вкладки ("вкладки", "mouseover");
}
Вкладки функции (id, trigger) {
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 = "";
}
}
}
}
Очень просто достичь эффекта переключения вкладки? Друзья могут использовать его в своих собственных проектах после украшения.