При создании сайта возникла проблема с вкладками (табы), которая заключалась в том, что представленные в Интернете варианты вкладок, из-за конфликта библиотек нарушают работу других приложений. Можно ли создать что-то подобное, но только на чистом CSS и HTML?
Большинство приложений используют библиотеку jQuery – это не удивительно, поскольку она предоставляет «создателю» не мало возможностей манипулировать не только с работой, но и с дизайном создаваемого компонента.
Но вот будет ли это «творение» работать в тандеме или станет причиной конфликта и как устранить возможный конфликт библиотек на сайте? Это уже вопросы которые не входят в планы «создателя» приложения.
Вот и у меня появилась проблема с вкладками, при установки которых, отказывается работать слайдер. Испробовал несколько вариантов устранения конфликта, результат неудовлетворительный и решил отыскать в уголках всемирной паутине эти же вкладки или хоть что-то подобное, но только на чистом CSS и HTML.
Результатом поиском стали вкладки, что имеют простой вид и простую разметку
<div>
<div id="tab1"><a href="
http://darkghost.pp.ua/#tab1"><font color="red">Немного про JS</font></a>
<a href="
http://darkghost.pp.ua/#tab2">Табы без JS</a>
<hr />
<h2>Таб 1</h2>
<p>текст-1 текст-1 текст-1 текст-1</p>
</div>
<div id="tab2"><a href="
http://darkghost.pp.ua/#tab1">Немного про JS</a>
<a href="
http://darkghost.pp.ua/#tab2"><font color="red">Табы без JS</font></a>
<hr />
<h2>Таб 2</h2>
<p>текст-2 текст-2 текст-2 текст-2</p>
</div>
</div>
и не сложное оформление
div.tabcontents {
height: 300px;
overflow: hidden;
}
div.content {
height: 300px;
overflow: visible;
}
Но вот как-то без кнопок, вкладки выглядят не очень. Поэтому возьмем поищем «стамеску, молоток» и доработаем.
Начнем пожалуй с HTML. Представленный выше HTML-код немного преобразуем, чтобы все настройки вывести в CSS.
<div id="content">
<ul>
<li><a href="
http://darkghost.pp.ua/#one">1</a></li>
<li><a href="
http://darkghost.pp.ua/#two">2</a></li>
<li><a href="
http://darkghost.pp.ua/#three">3</a></li>
<li><a href="
http://darkghost.pp.ua/#four">4</a></li>
<li><a href="
http://darkghost.pp.ua/#five">5</a></li>
</ul>
<div>
<ul>
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="four">4</li>
<li id="five">5</li>
</ul>
</div>
</div>
Немного комментариев. Наши кнопки поместим в класс — tabs, а содержание вкладок — tabs-content. Чтобы открыть содержание нужной вкладки в ссылке указываем соответствующее id
Теперь перейдем к CSS
#content .tabs {
font-family: Georgia;
font-size: 12px;
line-height: 30px;
list-style: none;
overflow: hidden;
height: 30px;
}
#content .tabs a {
float: left;
background: #eee;
padding: 0 15px;
text-decoration: none;
height: 30px;
}
#content .tabs a:hover {
background: #ddd;
}
#content .tabs-content {
width: 960px;
height: 300px;
overflow: hidden;
}
#content .tabs-content ul {
list-style: none;
text-align: center;
line-height: 300px;
font-size: 150px;
}
#content .tabs-content ul li {
width: 960px;
height: 300px
}
#content .tabs-content ul #one {
background: #b0a200;
}
#content .tabs-content ul #two {
background: #00aab0;
}
#content .tabs-content ul #three {
background: #b00095;
}
#content .tabs-content ul #four {
background: #78b000;
}
#content .tabs-content ul #five {
background: #b03200;
}
Думаю, что здесь нужно только прокомментировать, что размеры вкладок, блоков можно изменить на свои и что содержание каждой вкладки можно оформить индивидуально, наподобие неповторимого фона.
Сохранить исходные материалы можно здесь >>>
При копировании материала — прямая, активная, индексируемая ссылка на источник
обязательна!