Вот мой html:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
<a rel="img1">Link1</a>
</td>
<td>
<a rel="img2">Link2</a>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="cant-believe-it-icon.png" id="img1"/>
<img src="too-much-icon.png" id="img2"/>
</div>
<span>Text with fist image</span>
<span>Text with second image</span>
И мой jQuery:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
Когда щелкнут первый td, первое изображение будет видимым. Когда щелкнут второй td, первое изображение будет скрыто, а второе изображение будет видимым. Как применить это также к пролетам?
Обновление: я устанавливаю для всех изображений и охватывает класс = "группы". Затем я соединил первое изображение с первым диапазоном и т.д., Используя id = "group1", "group2" и так далее. Затем я устанавливаю rel td в "group1", "group2" и т.д. Javascript теперь читает:
$( window ).load(function() {
$(".groups").hide()
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$(".groups").hide()
$('#'+rel).fadeIn('slow');
});
Все закрывается при открытии, но когда нажата кнопка td, ничего не происходит?
<div id="box">
<img src="http://placehold.it/350x250/&text=img1" class="img1"/>
<img src="http://placehold.it/350x250/&text=img2" class="img2"/>
</div>
<span class="img1">Text with fist image</span>
<span class="img2">Text with second image</span>
$('a').click(function(){
var rel = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
$('.'+rel).fadeIn('slow');
});
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('span').hide();
spanid = imgid.substr(4) - 1*1;
$('#'+imgid).fadeIn('slow');
$('span:eq('+spanid+')').fadeIn('slow');
});
imgid.substr(4) - 1*1
... почему?
Вместо использования идентификатора на изображении используйте определенный класс и добавьте тот же класс к диапазонам. Поэтому, когда наряду с изображением с этим классом, промежутки также будут показаны/скрыты. Измененный код:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img,span').hide();
$('.'+imgid).fadeIn('slow');
});
Вот ссылка для jsfiddle: http://jsfiddle.net/EuGr3/
Используйте атрибут rel
на диапазонах:
<span rel="img1">Text with fist image</span>
<spa rel="img2">Text with second image</span>
JavaScript:
$('a').click(function(){
imgid = $(this).attr('rel');
$('a, span').removeClass('active');
$(this).addClass('active');
$('img, span').hide();
$('#'+imgid + ', span[rel="' + imgid + '"]').fadeIn('slow');
});
Sidenote: было бы лучше использовать data-rel
, так как это атрибуты data-*
.
Он работает так же.
Посмотрите jsfiddle: http://jsfiddle.net/kychan/j8vqX/
$('a.show').click(function()
{
$('.hideSpan').fadeIn();
});
$('a.hide').click(function()
{
$('.hideSpan').fadeOut();
});
<img>
в промежуток?