Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2014, 02:32
Новичок на форуме
Отправить личное сообщение для Nastya_Na Посмотреть профиль Найти все сообщения от Nastya_Na
 
Регистрация: 18.02.2014
Сообщений: 2

Событие полностью срабатывает в ie только по 2 клику
Добрый день!
Подскажите пожалуйста..Jquery знаю постольку-поскольку..столкнулась с проблемой - не корректно работают табы в ie 9 и ниже. В старших ie и других браузерах нормально все.

Сокращенный html:
<div class="content_tabs">
	<div class="content_tabs_left">
		<a href="#">
			<div class="content_tabs_left_tab content_tabs_left_tab1" id="tab_1">
				<img src="images/img1.png" alt="" />
				<span>Текст1</span>
			</div>
		</a>
		<a href="#">
			<div class="content_tabs_left_tab" id="tab_2">
				<img src="images/img2.png" alt="" />
				<span>Текст2</span>
			</div>
		</a>
                <a href="#">
			<div class="content_tabs_left_tab" id="tab_3">
				...
			</div>
		</a>
	</div>
	<div class="content_tabs_right">
		<div class="content_tab_right1 tab_1">
			<h4>Заголовок1</h4>
			<span>Текст2_1</span>
			<p>Скрытый текст2_1</p>
			<a href="#" class="content_tabs_right_a">
				<img src="images/about.png" alt="" />
				<span>Подробнее</span>
			</a>
		</div>
                <div class="content_tab_right tab_2">
			<h4>Заголовок2</h4>
			<span>Текст2_2</span>
			<p>Скрытый текст2_2</p>
			<a href="#" class="content_tabs_right_a">
				<img src="images/about.png" alt="" />
				<span>Подробнее</span>
			</a>
		</div>
               <div class="content_tab_right tab_3">
			...
		</div>
	</div>
</div>


CSS (избыточен, но выложила весь):

.content_tabs_left{
	width:295px;
	height:190px;
	float:left;
	font-size:12px;
}
.content_tabs_left a{
	text-decoration:none;
	cursor:pointer;
}
.content_tabs_left_tab1{
	width:100%;
	height:25px;
	border-top:1px solid #44514e;
	border-bottom:1px solid #44514e;
	background-color:#4bbc9c;
	color:#fff;
}
.content_tabs_left_tab{
	width:100%;
	height:25px;
	border-top:1px solid #fff;
	border-bottom:1px solid #959797;
}
.content_tabs_left_tab1 img, .content_tabs_left_tab img{
	float:left;
	margin:8px 0 0 15px;
}
.content_tabs_left_tab1 span, .content_tabs_left_tab span{
	margin:4px 0 0 38px;
}
.content_tabs_right{
	width:465px;
	height:auto;
	float:right;
	position:relative;
}
.content_tab_right{
	position:absolute;
	display:none;
}
.content_tab_right1{
	position:relative;
	display:block;
}
.content_tab_right1 p{
	display:none;
}
.content_tabs_right h4{
	font-size:12px;
	font-family: 'open_sansbold';
	margin:0;
	color:#2c2c2c;
	border-bottom:1px solid #2c2c2c;
	padding-bottom:6px;
	display:inline-block;
	margin-bottom:10px;
	position:relative;
}
.content_tabs_right_a{
	display:block;
	text-decoration:none;
	float:right;
	cursor:pointer;
}
.content_tabs_right_a span{
	font-size:12px;
	color:#2c2c2c;
	display:inline;
	margin-right:1px;
	padding:0;
	float:right;
}
.content_tabs_right_a img{
	display:inline;
	float:right;
	margin:5px 0 0;
}


Jquery (который работает в остальных браузерах):

function other() {
	$('.content_tabs_right_a').click(function() {
	var $b = $(this).parent().find('p');
		if ($($b).is(':hidden')) {
			$($b).css('display','block');
			$(this).find('span').html("Свернуть");
		} else{
			$($b).hide();
			$(this).find('span').html("Подробнее");
		} 
	return false;
	});
}
other();


$(".content_tabs_left_tab").click(function() {
	$('.content_tabs_left_tab1').removeClass('content_tabs_left_tab1').find('img').attr('src','images/img2.png');
	$(this).addClass('content_tabs_left_tab1').find('img').attr('src','images/img1.png');
	
	$a = $(this).attr('id');
	$('.content_tab_right1').removeClass('content_tab_right1').addClass('content_tab_right');
	$('.content_tabs_right').find('.' + $a).removeClass('content_tab_right').addClass('content_tab_right1').find('p').hide().parent().find('.content_tabs_right_a span').html("Подробнее");
	return false;
	
});


В общем получается, что при клике на левые табы - должны появляться соответствующие им правые табы. Они в ie появляются, но без заголовка (т.е. span, p и a - без h4). При повторном клике на левый таб - появляется в дополнение и заголовок. (Т.е. в том виде, в каком все и должно быть). Также я привела код для клика по "Подробнее", т.к. при клике на него - также срабатывает событие полностью (появляется скрытый текст "p" и появляется заголовок).

Зарание спасибо.

Последний раз редактировалось Nastya_Na, 18.02.2014 в 02:59.
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2014, 02:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Nastya_Na,
то есть пофигу что id одинаковое
Сообщение от Nastya_Na
id="tab_1"
и масло масленое
Сообщение от Nastya_Na
$($b)

Последний раз редактировалось рони, 18.02.2014 в 03:03.
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2014, 03:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Nastya_Na,
сделали бы макет здесь или в песочнице - кто будет собирать эти части и версию jQuery укажите.
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2014, 03:10
Новичок на форуме
Отправить личное сообщение для Nastya_Na Посмотреть профиль Найти все сообщения от Nastya_Na
 
Регистрация: 18.02.2014
Сообщений: 2

Версия v1.7.2
id-шки случайно не переделала при копипасте табов. Исправила. В исходном коде id разные.

Мне кажется, проблема могла бы решиться, если каким-то образом эмулировать второй клик. (Ведь в этом случае все работает). Если двигаться в этом направлении, не подскажете, как это сделать?

Последний раз редактировалось Nastya_Na, 18.02.2014 в 03:14.
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2014, 09:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Nastya_Na,
загадка остаётся прежней без макета ваш второй клик мало кто обнаружит
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
событие, которое срабатывает при изменении DOM структуры amigo* Events/DOM/Window 30 11.04.2017 13:39
jQuery: событие по второму подрят клику timyrio Общие вопросы Javascript 23 02.05.2011 01:11
Выполнить только один раз событие onClick. exBill Events/DOM/Window 3 04.10.2010 23:04
Почему скрипт срабатывает только после обновления страницы? Randomizer jQuery 2 01.09.2010 19:01
Событие hover только после 2 секунд niksan jQuery 7 12.08.2010 14:16