Держи, удачи тебе, если что непонятно, спрашивай <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Content</title> <style type="text/css"> *{ margin: 0; padding:0} div.wrap { width: 805px; margin: 20px auto; } ul { list-style: none; overflow: hidden; border-left: 1px solid #000;} ul li { float: left;} ul li a { display: block; background: red; width: 200px; font: bold 14px Verdana, Geneva, sans-serif; text-decoration: none; color: #300; border: 1px solid #000; border-left: 0; padding: 10px 0; text-align: center; } ul li a:hover { background: #333; color: #fff;} div#block div { /* Тут я сделал наши див блоками,для того, чтобы когда вырубаем скрипты, они все были показаны, как ты просил*/ display: block; background: #993; margin-bottom: 3px; border: 1px solid #000; border-width: 0 1px 1px; padding: 10px; font: bold 50px Verdana, Geneva, sans-serif; color: #fff; } div#block div.active { display: block;} div#block div.none { display: none;} ul li.active a{ background: #993;border-width: 1px 1px 0 0; padding-bottom: 11px; color: #fff;} </style> </head> <body> <div class="wrap"> <ul id="menu"> <li class="active"><a href="#" onclick="test(0); return false;">Overview</a></li> <li><a href="#" onclick="test(1); return false;">Requirements</a></li> <li><a href="#" onclick="test(2); return false;">Step By Step</a></li> <li><a href="#" onclick="test(3); return false;">Notes</a></li> </ul> <div id="block"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> </div> </div> <script> var block = document.getElementById('block')// Тут мы создали переменную и присвоили ей ссылку на наш блок с контейнерами. var blockDiv = block.getElementsByTagName('div')//Тут мы создали переменную и присвоили ей ссылку на коллекцию дивов в нашем блоке контейнере for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none'// тут мы сделали цикл и прошлись по нашией коллекции дивов и присвоили каждому класс 'none', чтобы все они были скрытые, так как в последствии мы сделаем активным именно наш, который нам нужен. blockDiv.item(0).className = 'active' // Тут я сделал активным ииенно первый див из нашей коллекции,для того, чтобы хотябы один был всегда активен, если что. function test(number){ // это мы создали функцию и передали ей параметр,число, которое находтится в онклике нашей ссылки, сверху. var menu = document.getElementById('menu') // Это короче переменная, которой мы присвоили ссылку на наше меню var li = menu.getElementsByTagName('li') // Это коллекция ЛИ в нашем меню var block = document.getElementById('block') // Это короче тоже самое, наш блок и ниже его коллекция дивов, правда мы это уже делали, потом разберёмся что к чему. var blockDiv = block.getElementsByTagName('div') for(var i = 0; i<li.length;i++) li.item(i).className = '' // Тут мы пробежались циклом по нашей коллекции ЛИ в меню и обнулии всем классы, чтобы они все были видны. for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none' // Тут вырубили все дивы в контейнере, чтобы потом врубить нужный. li.item(number).className = 'active' // А вот тут мы уже делаем активным именно наш нажатый ЛИ blockDiv.item(number).className = 'active' // А вот тут делаем активным именно тот див в контейнере, который соответствует вкладке меню. Вычеслили мы его по числу , индексу, blockDiv.item(number) } </script> </body> </html>
