JavaScript показать / скрыть вкладку - PullRequest
Новая
       7

JavaScript показать / скрыть вкладку

3 голосов
/ 30 ноября 2011

Сначала я хочу спрятать весь контент, затем нажмите одну вкладку, соответствующий контент отобразится (вкладка станет «активной»), и, если щелкнуть ее еще раз, она исчезнет.некоторые вкладки являются просто ссылкой «mailto».

проблема в том, что я не могу скрыть вкладки при повторном нажатии 

    $(document).ready(function(){
    $('#nav div').hide();
    $('#nav div:first').show();
    $('#nav ul li:first').addClass('active');
    $('#nav ul li a').click(function(){ 
        $('#nav div').hide();
        $('#nav ul li').removeClass('active');
        $(this).parent().addClass('active'); 
        var currentTab = $(this).attr('href'); 
        if($(currentTab).css('display')=='none'){
            $(currentTab).show();
        }else{
            $(currentTab).hide();
        }

    }
);
});

код навигации следующий: 

<div id="nav">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="mailto:email">Email</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

Ответы [ 3 ]

2 голосов
/ 30 ноября 2011

Это должно работать: 

$(function() {
    $('#nav div').hide();
    $('#nav div:first').show();
    $('#nav ul li:first').addClass('active');
    $('#nav ul li a').click(function(){
        var currentTab = $(this).attr('href');
        var vis = $(currentTab).is(':visible');
        $('#nav div').hide();
        $('#nav ul li').removeClass('active');
        $(this).parent().addClass('active');
        if(vis) {
            $(currentTab).hide();
        } else {
            $(currentTab).show();
        }
    });
});

Вы должны проверить, видима ли текущая вкладка , прежде чем скрыть ее.

работает: http://jsfiddle.net/tqhHA/

1 голос
/ 30 ноября 2011 
   $(document).ready(function(){
$('#nav div').hide();
$('#nav div:first').show();
$('a').click(function(){    
    var currentTab = '#'+$(this).text().toLowerCase();
    if($(currentTab).is(':visible')){
        $('#nav div').hide();
        $(currentTab).hide();
    }else{
        $('#nav div').hide();
        $(currentTab).show();
    }
}
);
});


<div id="nav">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Email</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

Пожалуйста, попробуйте приведенный выше код. Я изменяю значение href просто на "#", затем некоторые изменения в jquery.Пожалуйста, спросите в комментарии, если у вас есть какие-либо сомнения .. нажмите здесь, чтобы проверить

1 голос
/ 30 ноября 2011

Измените функцию щелчка на: 

$('#nav ul li a').click(function(){ 
    var currentTab = $(this).attr('href');  
    $('#nav div').not(currentTab).hide();
    $('#nav ul li').removeClass('active');
    $(this).parent().toggleClass('active');     
    if (currentTab.indexOf("mailto:") === -1)
    {
        $(currentTab).toggle();
    }
});

Рабочий пример

...