- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи
И выявили более 7 млн подозрительных пользователей
Оксана Мамчуева
Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы
Для интернет-магазина инженерных систем
Мария Лосева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте. Встала задача сверстать следующий блок с табами.
Контент тянется от 940-1260px, фоновая картинка табов растягивается на всю ширину экрана. Табы из Bootstrap.
<div class="bg-controls">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">Главная</a>
</li>
<li>
<a href="#profile" data-toggle="tab">Профиль</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
</div>
</div>
</div>
</div>
</div>
и?... в чем вопрос? "Просто возьми и сверстай"))
http://jqueryui.com/tabs/
http://shpargalkablog.ru/2012/03/css-tabs.html
и?... в чем вопрос? "Просто возьми и сверстай"))
Одинаковый фон в табах и содержимом заметили?
Одинаковый фон в табах и содержимом заметили?
и что отличает этим ваши табы от других табов? то что у них отсутствует оформление? так трудно взять любой код табов, коих в сети миллион без преувеличения, и убрать в css границы и фон?
SergeyTT, демо концепции (возможной) http://jsfiddle.net/br3t/5rahmy55/
Табы это изначально спрятанный контент, который показывается при каких то действиях. Можно это реализовать на цсс (без клика) или на цсс + ява скрипте (с кликом).
Например:
<div class="menu">
<span rel="tab_1">Первый таб</span>
<span rel="tab_2">Второй таб</span>
</div>
<div class="content">
<span id="tab_1">Содержимое первого таба</span>
<span id="tab_2">Содержимое второго таба</span>
</div>
Теперь прячем спаны в диве .content (.content span {display: none;}) и с помощью какого нибудь jquery пишем что то типа:
$( ".menu span" ).click(function() {
$('.content span').hide();
var tab = $(this).attr('rel');
$(tab).show();
});
Кстати
AnuBella, проблема в том, что jquery.hide/show и jquery.fadeOut/fadeIn - порождают дергун всего контента, что ниже блока с табами.
так как одновременно имеется 2 видимых блока, один из которых сворачивается, другой разворачивается.
я это заборол в общем-то ректальным способом
временным добавлением position absolute к блокам и выравниванием размеров их родителя (который relative) согласно размеру появляющегося таба.
НО подозреваю, что есть более изящный способ.
Может есть у кого какие идеи?!
НО подозреваю, что есть более изящный способ.
На мой взгляд, ваше решение слишком сложное. Достаточно всю эту конструкцию обернуть дивом с фиксированной высотой, да и табы делать одинаковыми по высоте. Тогда моргать ничего не будет.
AnuBella, Не вариант контент - динамический. и потом, делать фикс, это плохой тон в верстке.
Проблема совпадения рисунка бэкграунда таба и содержимого решена через background-attachment . Всем Спасибо за внимание.