jquery переключается между div и впоследствии скрывает активный div

игра на аналогичный вопрос, заданный мной, который был милостиво ответил.

три div, все скрытые. jquery переключается между ними по разным ссылкам. это отлично работает! теперь я хотел бы щелкнуть ссылку, соответствующую активному div, и скрыть ее, по сути, так же, как когда страница загружается со всеми скрытыми. прямо сейчас он исчезает и снова появляется.

помощь! спасибо!

HTML:

 <div id="nav">
    <a class="home" id="show_about" title="About">ABOUT</a><br />
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
    <a class="home" id="show_contact" title="Contact">CONTACT</a>
 </div>
 <div id="content">
    <div class="current" id="about">
        <p>ABOUT's content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE's content</p>
    </div>
    <div id="contact">
        <p>CONTACT's content</p> 
    </div>
</div>

Javascript:

    $(function(){
        $('#about').css('display', 'none');
        $('#subscribe').css('display', 'none');
        $('#contact').css('display', 'none');
    });
    $('.home').click(function(){   
        var id = $(this).html().toLowerCase();
        $('.current').fadeOut(600, function(){
            $('#'+id).fadeIn(600);
            $('.current').removeClass('current');
            $('#'+id).addClass('current');     
        });   
    });

javascript html toggle jquery hidden
person technopeasant    schedule 26.02.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте это..

Так как при fadeOut текущий класс удаляется, если размер текущего равен 0, это означает, что ничего не выбрано. Мы можем просто затухать в div содержимого.

$('#about, #subscribe, #contact').hide();

$('.home').click(function() {
    var id = $(this).html().toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function(){showContent($content)});
    }
});

function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}

Пример на jsfiddle.

person Mark Coleman    schedule 26.02.2011
comment
@Mark Я думаю, мне следует добавить небольшую плавающую кнопку X, чтобы закрыть окно. Лучше всего включить эту функцию в эту функцию или вообще в другую? #close - это идентификатор - person technopeasant; 27.02.2011
comment
Итак, вы хотите добавить близкую ссылку в блок контента? Я бы переделал это в другую функцию. Поскольку прямо сейчас домашний клик обрабатывает ваше меню / отображение содержимого. Если вы работаете в закрытой функции, это может привести к тому, что метод может делать слишком много. - person Mark Coleman; 27.02.2011
comment
@ Марк отлично, спасибо за направление. если я правильно понимаю вашу функцию... она перемещает class=current в отображаемый div. Могу ли я затем сделать простую функцию щелчка, которая исчезает из класса = текущего div? - person technopeasant; 27.02.2011
comment
Да, это должно работать для ваших нужд. Рад, что смог чем-то помочь. - person Mark Coleman; 27.02.2011
comment
@Mark встроил его в отправленный вами jsFiddle .. функция не работает на основе class = current. Любые идеи? извините, что отнял у вас все время! jsfiddle.net/CZXqz/2 - person technopeasant; 27.02.2011
comment
Не беспокойтесь, проблема заключалась в том, что у вас было несколько идентификаторов близких, идентификатор должен быть уникальным для домена. Вместо этого я приспособился к использованию класса close и, похоже, ведет себя правильно. jsfiddle.net/markcoleman/CZXqz/3 - person Mark Coleman; 28.02.2011

arrow_upward
1
arrow_downward

Вот еще один подход:

$(function(){
        $('#content div').hide();
    });

    $('.home').click(function(){
        var targetSelector = '#' + $(this).attr('title').toLowerCase();
        var targetShown = $(targetSelector).is(':visible');

        if (targetShown) {
            $(targetSelector).fadeOut(600);
        } else {
            $('#content div:not(' + targetSelector + ')').fadeOut(600,
                                      function() {$(targetSelector).fadeIn(600)});
        }
    });
person Mike C    schedule 26.02.2011

arrow_upward
0
arrow_downward

Проверьте, равен ли идентификатор элемента, на который нажали, идентификатору отображаемого в данный момент элемента (т. е. элемента с классом current). Если это другой элемент, то необходимо произвести замену. Если это один и тот же элемент, то его нужно скрыть и удалить его текущий класс...

(Изменить: фиксированный код)

HTML:

<div id="nav">
    <a class="home" id="show_about" title="About">ABOUT</a><br />
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
    <a class="home" id="show_contact" title="Contact">CONTACT</a>
 </div>
<br />
<br />
<br />
 <div id="content">
    <div id="about">
        <p>ABOUT's content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE's content</p>
    </div>
    <div id="contact">
        <p>CONTACT's content</p>
    </div>
    <div class="current" id="dummy"></div>
</div>

JS:

$().ready(function()
{
        $('#about').hide();
        $('#subscribe').hide();
        $('#contact').hide();
        $('#dummy').hide();


  $('.home').click(function() {   
    var id = $(this).html().toLowerCase();  

      if ($('.current').length >0) {
      if($('.current')[0].id.toLowerCase() != id)
        {
          $('.current').hide();
          $('.current').removeClass('current');
          $('#'+id).addClass('current');     
          $('#'+id).show();
        }
        else
        {
          $('.current').hide();
          $('.current').removeClass('current');
          $('#dummy').addClass('current');
        }
      }
  });
});

Просто замените .hide() и .shows() на появление и исчезновение.

person TimFoolery    schedule 26.02.2011
comment
@Michael Майкл, просто предложение, что мы можем использовать jquery '.hide, чтобы скрыть, а не отображать ничего .. - person kobe; 26.02.2011
comment
Это было скопировано из кода OP и теперь удалено, потому что это не было частью функции, которая требовала настройки для решения проблемы. Однако верное замечание. - person TimFoolery; 26.02.2011
comment
Важное обновление, Дэниел. Поскольку ваш идентификатор div не имеет значения lcase, а ваша переменная id — да, они никогда не будут совпадать. Измените оператор if на это: if ($('.current').id.toLowerCase() != id) - person TimFoolery; 26.02.2011
comment
@Michael Сделал jsFiddle вашего кода. Он правильно переключается между ними, но все равно исчезает, а затем снова появляется, а не просто исчезает. jsfiddle.net/SHaQe - person technopeasant; 26.02.2011
comment
Я протестировал его и немного поправил код. Вот рабочий jsfiddle: jsfiddle.net/CJjMa/2. Просто замените .hide и .show на входы и выходы. - person TimFoolery; 27.02.2011