Создание промежутков, которые скрываются при нажатии другого объекта

0

Вот мой 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, ничего не происходит?

5 ответов

2

Решение

HTML

<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>

CSS

$('a').click(function(){
  var rel = $(this).attr('rel');
  $('a').removeClass('active');
  $(this).addClass('active');
  $('img').hide();    
  $('span').hide();   
  $('.'+rel).fadeIn('slow');
});
  • 0
    Могу ли я предложить добавить шкуры вне функции щелчка, чтобы они не отображались по умолчанию? jsbin.com/kamayuju/1 Кроме того, почему бы просто не вставить <img> в промежуток?
  • 0
    Почему это не работает в моем обновлении?
Показать ещё 1 комментарий
0
$('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');

});
  • 0
    imgid.substr(4) - 1*1 ... почему?
0

Вместо использования идентификатора на изображении используйте определенный класс и добавьте тот же класс к диапазонам. Поэтому, когда наряду с изображением с этим классом, промежутки также будут показаны/скрыты. Измененный код:

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');
    $('img,span').hide();    
    $('.'+imgid).fadeIn('slow');
});

Вот ссылка для jsfiddle: http://jsfiddle.net/EuGr3/

  • 0
    В вашем примере, что мне нужно изменить в javascript, чтобы установить классы изображений? Например, если я установил для первого изображения и класса span значение «group1», а для второго - «group2», что должен читать javascript? (Я еще не дошел до изучения javascript).
  • 0
    Допустим, вам нужно скрыть класс «group2», а затем заменить этот код: «$ ('img, span'). Hide ();" с $ ('. group2'). hide (); ,
Показать ещё 1 комментарий
0

Используйте атрибут 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-*.

0

Он работает так же.

Посмотрите jsfiddle: http://jsfiddle.net/kychan/j8vqX/

$('a.show').click(function()
{
    $('.hideSpan').fadeIn();
});

$('a.hide').click(function()
{
    $('.hideSpan').fadeOut();
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню