Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Красивые табы с переходом по ссылки в нужный таб

Красивые табы с переходом по ссылки в нужный таб

11 окт 2014 | Комментариев: 0 | Просмотров: 1242

В этой статье я расскажу как сделать табы с сылкой, чтоб потом перейти в нужный таб по ссылке. Для этого нужно:

 

1. Скрипт

 

function switchContentTabs() {
var currentPath = window.location.hash;
var contentId = currentPath.substring(1);
contentId += '_block';
var contentDiv = document.getElementById(contentId);
 
if (contentId != '_block') {
$('#nav li').removeClass('active');
$('#nav li a[href=' + currentPath +']').parents('li').addClass('active');
$('.content_inner').css({'display':'none'});
contentDiv.style.display = 'block';
}
else {
$('.content_inner').css({'display':'none'});
document.getElementById('astronomy_block').style.display = 'block';
}
}
 
switchContentTabs();
 
$('#nav li').click(function() {
$('#nav li').removeClass('active');
$(this).addClass('active');
var currentPath = $(this).children('a').attr('href');
var contentId = currentPath.substring(1);
contentId += '_block';
var contentDiv = document.getElementById(contentId);
$('.content_inner').css({'display':'none'});
contentDiv.style.display = 'block';
});

 

2. CSS

 


body {
min-width: 600px;
}
#nav {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
 
#nav li {
float: left;
margin-right: 5px
}
 
#nav li a,
#nav li a:visited{
display: block;
padding: 6px 20px;
background: #ff9;
border: 1px solid #003;
border-bottom: none;
text-decoration: none;
color: #111;
}
 
#nav li.active a{
background: #fc9;
color: #333;
}
 
.content {
width: 600px;
padding: 25px;
border: 1px solid #003;
}
 
.content_inner {
display: none;
}
 
h2 {
margin: 0 0 10px 0;
font-size: 120%;
font-weight: bold;
}
p {
font-size: 90%;
margin: 5px 0;
}

 

3. Сам HTML код

 


<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<ul id="nav">
<li class="active"><a href="#astronomy">Астрономия</a></li>
<li><a href="#literature">Литературоведение</a></li>
<li><a href="#marketing">Маркетинг</a></li>
<li><a href="#philosophy">Философия</a></li>
</ul>
<div class="content">
<div class="content_inner" id="astronomy_block">
<h2>Почему наблюдаема комета?</h2>
<p>Азимут существенно иллюстрирует лимб, таким образом, атмосферы этих планет плавно переходят в жидкую мантию. Соединение иллюстрирует эллиптический эксцентриситет, и в этом вопросе достигнута такая точность расчетов, что, начиная с того дня, как мы видим, указанного Эннием и записанного в "Больших анналах", было вычислено время предшествовавших затмений солнца, начиная с того, которое в квинктильские ноны произошло в царствование Ромула. Очевидно, что Каллисто последовательно решает центральный Тукан – север вверху, восток слева. Пpотопланетное облако на следующий год, когда было лунное затмение и сгорел древний храм Афины в Афинах (при эфоре Питии и афинском архонте Каллии), точно вызывает первоначальный спектральный класс, при этом плотность Вселенной в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.</p>
<p>Большой круг небесной сферы выслеживает метеорит, тем не менее, Дон Еманс включил в список всего 82-е Великие Кометы. Уравнение времени последовательно перечеркивает лимб – север вверху, восток слева. Скоpость кометы в пеpигелии иллюстрирует спектральный класс, при этом плотность Вселенной в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы. Юпитер, это удалось установить по характеру спектра, притягивает годовой параллакс, учитывая, что в одном парсеке 3,26 световых года. Фаза, а там действительно могли быть видны звезды, о чем свидетельствует Фукидид отражает лимб (датировка приведена по Петавиусу, Цеху, Хайсу).</p>
<p>Конечно, нельзя не принять во внимание тот факт, что натуральный логарифм прочно иллюстрирует болид , тем не менее, Дон Еманс включил в список всего 82-е Великие Кометы. Угловая скорость вращения возможна. Огpомная пылевая кома ищет Южный Треугольник, хотя для имеющих глаза-телескопы туманность Андромеды показалась бы на небе величиной с треть ковша Большой Медведицы. Соединение представляет собой экваториальный перигей, Плутон не входит в эту классификацию.</p>
</div>
<div class="content_inner" id="literature_block">
<h2>Почему сложен композиционный анализ?</h2>
<p>Генеративная поэтика иллюстрирует глубокий символ, хотя по данному примеру нельзя судить об авторских оценках. Возврат к стереотипам аннигилирует диалектический характер, особенно подробно рассмотрены трудности, с которыми сталкивалась женщина-крестьянка в 19 веке. Наш «сумароковский» классицизм – чисто русское явление, но абстракционизм вызывает экзистенциальный метр, хотя в существование или актуальность этого он не верит, а моделирует собственную реальность. Зачин разрушаем. Генеративная поэтика аннигилирует глубокий хорей, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания. Комбинаторное приращение, по определению притягивает конкретный возврат к стереотипам, также необходимо сказать о сочетании метода апроприации художественных стилей прошлого с авангардистскими стратегиями.</p>
<p>Акцент традиционно дает сюжетный пастиш, что нельзя сказать о нередко манерных эпитетах. Метр, на первый взгляд, интуитивно понятен. Абстрактное высказывание, согласно традиционным представлениям, мгновенно. Если архаический миф не знал противопоставления реальности тексту, тоника нивелирует глубокий мифопоэтический хронотоп, где автор является полновластным хозяином своих персонажей, а они - его марионетками. Однако, исследователи постоянно сталкиваются с тем, что мелькание мыслей представляет собой урбанистический абстракционизм, таким образом в некоторых случаях образуются рефрены, кольцевые композиции, анафоры.</p>
<p>Филологическое суждение, чтобы уловить хореический ритм или аллитерацию на "л", вызывает музыкальный скрытый смысл, где автор является полновластным хозяином своих персонажей, а они - его марионетками. Аффилиация возможна. Символ традиционно представляет собой скрытый смысл и передается в этом стихотворении Донна метафорическим образом циркуля. Дактиль, как справедливо считает И.Гальперин, просветляет конкретный поток сознания, таким образом в некоторых случаях образуются рефрены, кольцевые композиции, анафоры. Анализ состава 17 рукописных сборников, содержащих тексты стихотворных фацеций, позволяет сделать вывод о том, что драма абсурдно притягивает диалогический контекст, особенно подробно рассмотрены трудности, с которыми сталкивалась женщина-крестьянка в 19 веке.</p>
</div>
<div class="content_inner" id="marketing_block">
<h2>Конвергентный сегмент рынка глазами современников</h2>
<p>К тому же лидерство в продажах вполне выполнимо. Конвесия покупателя, вопреки мнению П.Друкера, неоднозначна. Продвижение проекта синхронизирует стратегический маркетинг, размещаясь во всех медиа. Построение бренда охватывает системный анализ, размещаясь во всех медиа.</p>
<p>Стоит отметить, что рыночная ситуация уравновешивает баинг и селлинг, отвоевывая свою долю рынка. Рекламная поддержка подсознательно нейтрализует маркетинг, отвоевывая свою долю рынка. Можно предположить, что медийная реклама последовательно специфицирует межличностный пул лояльных изданий, повышая конкуренцию. Поэтому медиапланирование нетривиально.</p>
<p>Бюджет на размещение, конечно, порождает эмпирический традиционный канал, не считаясь с затратами. Общество потребления стремительно восстанавливает потребительский рынок, не считаясь с затратами. Узнавание бренда переворачивает коллективный процесс стратегического планирования, используя опыт предыдущих кампаний. Департамент маркетинга и продаж однородно порождает портрет потребителя, невзирая на действия конкурентов. Поведенческий таргетинг концентрирует культурный BTL, оптимизируя бюджеты.</p>
</div>
<div class="content_inner" id="philosophy_block">
<h2>Данный бабувизм: закон исключённого третьего или сомнение?</h2>
<p>Созерцание рассматривается трагический бабувизм, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Согласно мнению известных философов, смысл жизни решительно контролирует интеллигибельный гений, открывая новые горизонты. Исчисление предикатов, по определению, выводит мир, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения. Ощущение мира, конечно, преобразует из ряда вон выходящий закон исключённого третьего, изменяя привычную реальность. Искусство непредвзято контролирует предмет деятельности, однако Зигварт считал критерием истинности необходимость и общезначимость, для которых нет никакой опоры в объективном мире. Апперцепция порождена временем.</p>
<p>Надо сказать, что исчисление предикатов решительно контролирует данный закон исключённого третьего, ломая рамки привычных представлений. Согласно мнению известных философов, бабувизм рефлектирует мир, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Единственной космической субстанцией Гумбольдт считал материю, наделенную внутренней активностью, несмотря на это знак порождает и обеспечивает сложный дедуктивный метод, хотя в официозе принято обратное. Дилемма подчеркивает интеллигибельный гравитационный парадокс, tertium nоn datur.</p>
<p>Свобода решительно рассматривается сложный даосизм, открывая новые горизонты. Вероятностная логика создает дедуктивный метод, хотя в официозе принято обратное. Ощущение мира рефлектирует смысл жизни, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения. Автоматизация естественно подчеркивает принцип восприятия, при этом буквы А, В, I, О символизируют соответственно общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное суждения. Заблуждение естественно осмысляет смысл жизни, открывая новые горизонты. Эклектика создает сенсибельный гравитационный парадокс, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
</div>
</div>
</body>
</html>

 

Вот и все готово.


Теги: html, CSS3, javascript

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Всплывающее окно при входе на сайт

Всплывающее окно при входе на сайт

В этой статье рассакажу как сделать красивое всплывающее окно при заходе на сайт.
Эффект тени при помощи CSS3

Эффект тени при помощи CSS3

Эффект тени мы будем выполнять с помощью CSS. Соответственно никаких изображений, только стили.
Появление кнопки при поставленной галки в чекбоксе

Появление кнопки при поставленной галки в чекбоксе

  Простое появлении кнопки при нажатом чекбоксе.
Кнопки с анимацией на CSS3

Кнопки с анимацией на CSS3

Красивые кнопки с анимацией на CSS3. Всегда подойдет любому сайту
Обычное меню на CSS3 с закругленными краями

Обычное меню на CSS3 с закругленными краями

Простое CSS3 меню с закругленными краями использующее свойство ...border-radius, поэтому в IE может не отображаться.
Навигационное меню темными кнопками

Навигационное меню темными кнопками

Простое меню на CSS3/HTML с эффектом выдавливания в темных тонах.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.