Главная » Статьи » HTML и CSS » HTML |
Вкладки для uCoz
Многие из нас , задумывались как на главную страничку вместить побольше информации, но так что бы было не сильно облеплено. Пример оформления главной странички с помощью вкладок вы можете посмотреть на MirNFS.ru Немного по гуглив, я нарыл интересную статейку про вкладки "Табы" которые работают на jQuery. Собственно выкладываю вам эту полезную статейку : Для начала нам нужен HTML. Скажем, у нас будет всего 3 таба (соотвественно и 3 вида содержимого). Пишем следующий код: Code <h1>Цитаты</h1> <div class="tabs"> <!-- Это сами вкладки --> <ul class="tabNavigation"> <li><a class="" href="#first">Д.Огилви</a></li> <li><a class="" href="#second">Миллер</a></li> <li><a class="" href="#third">Черчилль</a></li> </ul> <!-- Это контейнеры содержимого --> <div id="first"> <h2>Д.Огилви</h2> Лучший способ превратить работника в генератор идей это возложить на него самую высокую ответственность.</p> </div> <div id="second"> <h2>Миллер</h2> Деньги не имеют значения — пока они у вас есть.</p> </div> <div id="third"> <h2>Черчилль</h2> Пессимист видит трудности при каждой возможности; оптимист в каждой трудности видит возможности.</p> </div> </div> Обратите внимание, что имя якоря ссылки таба соотвестсвует id дива. Теперь добавим сюда стилей по вкусу: Code div.tabs { background: #333; padding: 1em; } div.container { margin: auto; width: 90%; margin-bottom: 10px; } ul.tabNavigation { list-style: none; margin: 0; padding: 0; } ul.tabNavigation li { display: inline; } ul.tabNavigation li a { padding: 3px 9px; background-color: #666; color: #000; text-decoration: none; } ul.tabNavigation li a.selected, ul.tabNavigation li a.selected:hover { background: #FFF; color: #000; } ul.tabNavigation li a:hover { background: #ccc; color: #000; } ul.tabNavigation li a:focus { outline: 0; } div.tabs div { padding: 5px; margin-top: 3px; border: 1px solid #FFF; background: #FFF; } div.tabs div h2 { margin-top: 0; } Финальным штрихом будет JavaScript код:
Code $(function () { var tabContainers = $('div.tabs > div'); // получаем массив контейнеров tabContainers.hide().filter(':first').show(); // прячем все, кроме первого // далее обрабатывается клик по вкладке $('div.tabs ul.tabNavigation a').click(function () { tabContainers.hide(); // прячем все табы tabContainers.filter(this.hash).show(); // показываем содержимое текущего $('div.tabs ul.tabNavigation a').removeClass('selected'); // у всех убираем класс 'selected' $(this).addClass('selected'); // текушей вкладке добавляем класс 'selected' return false; }).filter(':first').click(); }); Теперь остается посмотреть, что у нас получилось. | |
Просмотров: 3232 | Комментарии: 2 | Рейтинг: 5.0/2 |
Всего комментариев: 2 | |||
| |||