Вкладка (tab) не отображает элементы

rus · May 29, 2012

Всем доброго дня.

на сайте есть две вкладки: "Лидеры продаж" и "Новинки".

первая вкладка работает и все нормально отображает, если кликнуть на вторую, стиль в принципе меняется у нее и всего блока под ней, но в инспекторе он все-равно серого (типа не активный) цвета, хотя по стилям вроде как все гуд, за исключением ширины и высоты.

я склонен (чисто интуитивно) подозревать, что дело в скрипте самой карусели (/bitrix/templates/store_minimal_gray/jcarousellite.js), которая высчитывает ширину, высоту и пр. стили и применяет их к элементам, но вот как это связать с другим скриптом (/bitrix/templates/store_minimal_gray/tabs.js), который реагирует на клик по вкладке?

Great Rash · May 29, 2012

http://www.gmarwaha.com/jquery/jcarousellite/#doc

Судя по всему никак, в доках нет ни слова о API, т.е. заставить карусель перерисоваться после открытия таба не получится.

lexxcode · May 29, 2012

Эта карусеька не может размеры элементов корректно взять, пока находится в скрытом блоке. Сделай одноразовую инициализацию карусели, в тот момент, когда у тебя активируется вкладка, то есть видимой становится. Например, можно вкладкам добавить класс показывающий ее открытость. Там где открыто, инициализировать карусель сразу, а, потом уже при переходе, на другую, запускать другие карусельки, которые были в скрытом блоке.

Как-то так, во всяком случае я боролся с такой проблемой.

rus · May 29, 2012

Эта карусеька не может размеры элементов корректно взять, пока находится в скрытом блоке. Сделай одноразовую инициализацию карусели, в тот момент, когда у тебя активируется вкладка, то есть видимой становится. Например, можно вкладкам добавить класс показывающий ее открытость. Там где открыто, инициализировать карусель сразу, а, потом уже при переходе, на другую, запускать другие карусельки, которые были в скрытом блоке.
Как-то так, во всяком случае я боролся с такой проблемой.

с логической точки зрения вроде бы подход верный, но как это реализовать?

в css табов (/bitrix/templates/store_minimal_gray/tabs.css) есть класс visible для блоков который отвечает за показ блока и применив его для блока с классом box при загрузке страницы показываются обо блока, потом при переключении по вкладкам уже все работает нормально.

но как вот избежать при загрузке страницы показа обоих блоков, надо что бы только один показывался, другой был скрыт. :blush:

lexxcode · May 29, 2012

Еще как вариант инициализировать табы ПОСЛЕ слайдера http://alexriz.kodingen.com/sld/

Great Rash · May 29, 2012

Можно замутить класс .hidden, который будет прятать ненужный таб вот так:


.hidden {
  position: absolute;
  left: -9999px;
}

В таком случае скрипт его обработает. Когда надо показать таб, снимаем класс и вуаля.

mishka · May 29, 2012

Как подсказал выше Great Rash, надо прятать/показывать блоки не через display: block/none, а через абсолют.

Убери со стилей:

.box.visible {

display: block;

}

.box {

-moz-border-bottom-colors: none;

-moz-border-image: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

background: none repeat scroll 0 0 #EFEFEF;

border-color: #F87417;

border-style: solid;

border-width: 0 1px 1px;

display: none;

float: left;

overflow: hidden;

padding: 5px 12px;

width: 725px;

}

.visible пусть будет как есть. А вот .hidden скрывай абсолютом.

rus · May 29, 2012

попробовал, чет ничего не вышло, может не так делаю?

по умолчанию, первая вкладка отвечает за активный блок и его классами являются box и visible

я задал второму блоку, который был просто box еще один класс hidden и теперь нужно этот класс убрать когда я переключаюсь на вторую вкладку и оставить только box.


(function($) {
$(function() {

	$('ul.tabs').delegate('li:not(.current)', 'click', function() {
		$(this).addClass('current').siblings().removeClass('current')
			.parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
	})

})
})(jQuery)

как?

или может я не правильно мыслю?

Great Rash · May 29, 2012

http://jsfiddle.net/nCCn2/

mishka · May 29, 2012

.tabs div.visible {position: static;}

Это не обязательно. Так как у него может быть relative а не static.

Главное прописать стили для класса .hidden { position: absolute; left: -32700px; top: -32700px; }

И теперь нам класс visible не нужен вообще.

Нам главное скрывать неактивные табы.

Показывать прятать тоже лучше не через fadeIn/fadeOut, а через

animate({opacity: ...}, {complete: function(){ $(this).addClass('hide') }})

Great Rash · May 29, 2012

Дописал бы мой фиддл.

rus · May 29, 2012

Great Rash попробовал твой вариант в "бою", но чет отказывается работать.

почему? jq - подключен, что еще надо?

Great Rash · May 29, 2012

Ну откуда ж я знаю Не видя кода. Да и мой вариант сыроват, прямо скажем. Я б его сам использовать не стал. Я так, дал направление так сказать

У mishka более правильный ход мыслей.

Перенеси часть своего боевого кода в jsfiddle.

rus · May 29, 2012

http://рестр.рф/ - вот тут, собсно переносить даже ничего не надо, я взял твой код и вставил на сайт.

вот на jsfiddle: http://jsfiddle.net/rus333/vtJmg/3/ - все работает, на сайте не хочет...

UPD: скопировал с сайта и еще раз изменил html код: http://jsfiddle.net/rus333/vtJmg/6/

Great Rash · May 29, 2012

На странице это единственные <li>? Если нет, то работать не будет. В jQuery есть такое понятие как "контекст поиска". Поменяй в коде

$('li').each(function(i) {

на

$('li', '.tabs_catalog_top_new').each(function(i) {

А то получается, что скрипт навешивает обработчики вообще всем <li> на странице. И индексы дивов не совпадают с индексами списка.

rus · May 29, 2012

cделал - нет результата :facepalmxd:

да что ж такое то а!!! :dash:

Great Rash · May 29, 2012

Ну выведи алерт на клик. Посмотри чо будет если вывести alert(i);

rus · May 29, 2012

$('li', '.tabs_catalog_top_new').each(function(i) {
  var _this = $(this);  
  _this.click(function(e) {
alert(i); 
    $('div', '.box_catalog_top_new')
    .removeClass('visible')
    .css({
      opacity: 0    
    })
    .eq(i)
    .addClass('visible')
    .animate({
      opacity: 1    
    });
  });
});

ничего не выводит

а может быть такое что версия JQ не подходит?

* jQuery JavaScript Library v1.3.2

Great Rash · May 29, 2012

Да нет, в той версии все это уже было. На фидле можно в меню слева версию сменить. А если закоментировать весь код на странице, кроме табов, будет работать?

rus · May 29, 2012

Да нет, в той версии все это уже было. На фидле можно в меню слева версию сменить. А если закоментировать весь код на странице, кроме табов, будет работать?

удалил содержимое блоков вывода контента, оставил только слова: текст1 и текст2, локально безо всякого "мусора" проверил - нет результата, а на jsfiddle работает...

jquery.min.js - * jQuery JavaScript Library v1.4.2


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="js" lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.min.js" type="text/javascript" language="javascript"></script>
<style type="text/css">
.tabs_catalog_top_new li {
	float: left;
	padding: 3px 5px;
}
.tabs_catalog_top_new, .tabs_catalog_top_new li {
	overflow: hidden;
	border: 1px solid;
}

.box_catalog_top_new {
	border: red 1px solid;
	padding: 5px;
}
.box_catalog_top_new div {
	background: pink;
	padding: 5px;
	position: absolute;
	left: -9999px;
	opacity: 0;
	filter: alpha(opacity=0);
}
.box_catalog_top_new div.visible {
	position: static;
}
</style>
<script type="text/javascript">
$('li', '.tabs_catalog_top_new').each(function(i) {
  var _this = $(this);  
  _this.click(function(e) {
alert(i); 
    $('div', '.box_catalog_top_new')
    .removeClass('visible')
    .css({
      opacity: 0    
    })
    .eq(i)
    .addClass('visible')
    .animate({
      opacity: 1    
    });
  });
});
</script>
</head>
<body>
<ul class="tabs_catalog_top_new">
	<li>Лидеры продаж</li>
	<li>Новинки</li>
</ul>
<div class="box_catalog_top_new">
<div>
текст1
</div>
<div>
текст2
</div>
</div>
</body>
</html>

Great Rash · May 29, 2012

Тьфу блин... а в $(document).ready кто будет заворачивать? Ясен пень не работает, код еще не знает что в DOM есть эти элементы. А на jsfiddle DOMContentLoaded автоматом стоит.

rus · May 29, 2012

1) обернул, хоть какой-то эффект появился.

2) при первом заходе на страницу первая вкладка по идее сразу должна отображать ее активный блок, а не отображает. как это сделать?

3) при клике по первому табу - все-равно показывается не весь блок, а только заголовок, то есть карусель по прежнему скрыта.

4) при клике по второму табу - вообще ничего не показывается.

rus · May 29, 2012

О чудо! Получилось!!! :yahoo:

Только вот все же вопрос остался: как сделать что бы при загрузке страницы всегда показывался блок который у первой вкладке?

css+opacity этому блоку?

lexxcode · May 29, 2012

Ну так например включить первый таб (добавить в ready):


$('.box_catalog_top_new .box_content').eq(0).addClass('visible').css({opacity : 1});

А чем не подошел мой вариант (так для справки)?

s0rr0w · May 29, 2012

Смотрю я на все это и улыбаюсь... На Великом и Могучем jQuery вчетвером не могут примитивную задачу решить.

И это еще не решалась задача автоматической догрузки контента у табов.

rus · May 29, 2012

Смотрю я на все это и улыбаюсь...

от улыбки...

Ну так например включить первый таб (добавить в ready):
$('.box_catalog_top_new .box_content').eq(0).addClass('visible').css({opacity : 1});
А чем не подошел мой вариант (так для справки)?

эмм..., да не то что бы принципиально не рассматривал, просто понимания нету некоторых вещей в js, он же вроде как C-подобный, а я больше склонен думать на php

Спасибо.

Great Rash - спасибо.

Sign In

Вкладка (tab) не отображает элементы

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information