Скрыть и показать div работает только один раз

Question

Я сделал такой простой код, чтобы показать и скрыть div, но я не знаю, почему он работает только один раз. Когда я показываю и скрываю другой div, тогда, когда я муравь, чтобы сделать это снова, он не работает. Вот код (содержимое div не важно). В CSS я не установлен дисплей: нет на обоих дивы

function pokazMail(ID) { 
 
    if (document.getElementById(ID).style.display != 'none') { 
 
     if (document.getElementById('wizyta').style.display == 'block') { 
 
      document.getElementById('wizyta').style.display = 'none'; 
 
      document.getElementById(ID).style.display = 'block'; 
 
     } else { 
 
      document.getElementById(ID).style.display = 'block'; 
 
     } 
 
    } 
 
} 
 

 
function pokazWizyta(ID) { 
 
    if (document.getElementById(ID).style.display != 'none') { 
 
     if (document.getElementById('mail').style.display == 'block') { 
 
      document.getElementById('mail').style.display = 'none'; 
 
      document.getElementById(ID).style.display = 'block'; 
 
     } else { 
 
      document.getElementById(ID).style.display = 'block'; 
 
     } 
 
    } 
 
}

#mail{display:none;} 
 
#wizyta{display:none;}

<a class="btn btn-primary btn-lg" onclick="pokazMail('mail');">First.</a> 
 
<a class="btn btn-primary btn-lg" onclick="pokazWizyta('wizyta');">Second.</a> 
 
<div id="mail">dsjdhs </div> 
 
<div id="wizyta">12313213</div>

Здесь: http://jsfiddle.net/Lcbm8m8m/

Answer 1

Вы должны использовать методы JQuery как .hide() и .show()

Вот и пример от его использования:

function pokazMail(ID) { 
    $("#mail").show(); 
    $("#wizyta").hide(); 
} 

function pokazWizyta(ID) { 
    $("#mail").hide(); 
    $("#wizyta").show(); 
} 

jsFiddle

function pokazMail(ID) { 
 
    $("#mail").show(); 
 
    $("#wizyta").hide(); 
 
} 
 

 
function pokazWizyta(ID) { 
 
    $("#mail").hide(); 
 
    $("#wizyta").show(); 
 
}

#mail{display:none;} 
 
#wizyta{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="btn btn-primary btn-lg" onclick="pokazMail('mail');">First.</a> 
 
<a class="btn btn-primary btn-lg" onclick="pokazWizyta('wizyta');">Second.</a> 
 
<div id="mail">dsjdhs </div> 
 
<div id="wizyta">12313213</div>

Answer 2

Я думаю, вы можете использовать Jquery, поскольку я вижу, вы с помощью начальной загрузки классов. Использование проверки, если дисплей блока, то пряча его подход:

//javascript 
function pokazMail(ID) { 

    if($("#wizyta").css('display') == "block"){ 
     $("#wizyta").css("display", "none"); 
    } 
    $("#mail").css("display", "block"); 
} 

function pokazWizyta(ID) { 

    if($("#mail").css('display') == "block"){ 
     $("#mail").css("display", "none"); 
    } 
    $("#wizyta").css("display", "block"); 
} 

//css 
#mail{display:none;} 
#wizyta{display:none;} 

<!--html--> 
<a class="btn btn-primary btn-lg" onclick="pokazMail('mail');">First.</a> 
<a class="btn btn-primary btn-lg" onclick="pokazWizyta('wizyta');">Second.</a> 
<div id="mail">dsjdhs </div> 
<div id="wizyta">12313213</div> 

Answer 3

function pokazMail(IDtoShow,IDtoHide) { 
 
document.getElementById(IDtoShow).style.display = 'block'; 
 
document.getElementById(IDtoHide).style.display = 'none'; 
 
}

#mail{display:none;} 
 
#wizyta{display:none;}

<a class="btn btn-primary btn-lg" onclick="pokazMail('mail','wizyta');">First.</a> 
 
<a class="btn btn-primary btn-lg" onclick="pokazMail('wizyta','mail');">Second.</a> 
 
<div id="mail">dsjdhs </div> 
 
<div id="wizyta">12313213</div>

Answer 4

Проблема вы заявили, было немного, чем то, что ваш код пытается достичь .. НО Я ДУМАЮ, Я понял, чего вы на самом деле пытаетесь достичь ...

Итак, если это то, чего вы пытаетесь достичь, чем мое решение будет работать нормально: Вы ожидаете, что, когда вы нажмете на ди элемент управления splay, другие «похожие» связанные элементы скрыты, но тот, который связан с элементом управления отображением, который вы нажали ... Немного глотка, правильно? Извините, но я не родной английский человек :(

Поэтому код, как и родовое как можно это один я поставил вас с на вашем jsfiddle http://jsfiddle.net/Lcbm8m8m/71/

Во всяком случае, только в случае, если кто-то приходит ж/лучшей идеей и переопределяет скрипку, вот код, а ..

HTML

<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('mail');">First.</a> 
<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('wizyta');">Second.</a> 
<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('third');">Third.</a> 
<a class="btn btn-primary btn-lg" onclick="javascript: hideAllButMe('fourth');">Fourth.</a> 
<div id="mail" class="carouselle hidden">MAIL</div> 
<div id="wizyta" class="carouselle hidden">WIZTYA</div> 
<div id="third" class="carouselle hidden">THIRD</div> 
<div id="fourth" class="carouselle hidden">FOURTH</div> 

CSS

.hidden{display:none;} 
.carouselle{} 

JAVASCRIPT

function hideAllButMe(show) {  

    // Get all the elements on the page with the 'carouselle' class name.  
    var elementsMarkedForHidingList = document.getElementsByClassName('carouselle');  

    // document.getElementsByClassName returns a NodeList and this turns it into an array 
    var nodeArray = Array.prototype.slice.call(elementsMarkedForHidingList); 

    // we iterate the array and hide all the elements... 
    nodeArray.map(function(item) { 
     addClass(item, 'hidden'); 
    }); 

    // and we show the one referenced by the element we've clicked... 
    removeClass(document.getElementById(show), 'hidden'); 
} 

function addClass(el, className) { 
    var cls = el.className.match(/\S+/g) || []; 
    if (!hasClass(el, className)) { 
    cls.push(className); 
    } 
    el.className = cls.join(' '); 
} 

function removeClass(el, className) { 
    var cls = el.className.match(/\S+/g) || []; 
    if (hasClass(el, className)) { 
    cls.pop(className); 
    } 
    el.className = cls.join(' ');  
} 

function hasClass(el, className) { 
    var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)'); 
    return re.test(el.className); 
} 

Однако я настоятельно рекомендую использовать библиотеку JavaScript, такие как JQuery для манипулирования DOM и не увлекайтесь, как я и писать ваниль Javascript ...