Показать сообщение отдельно
  #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.
Ответить с цитированием