Добрый день!
Подскажите пожалуйста..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" и появляется заголовок).
Зарание спасибо.
