Question

我制作了这么简单的代码来显示和隐藏div，但我不知道为什么它只能运行一次。当我展示并隐藏其他div时，那么当我再次这样做时它就不会起作用了。这是代码（div的内容并不重要）。在css中，我在两个div上设置display：none

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

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 2

您应该使用.hide()和.show()

等jQuery方法

以下是使用它的示例：

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

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

jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我猜你可以使用Jquery，因为我看到你使用bootstrap类。使用您的方法检查显示是否阻止然后隐藏它：

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

你所陈述的问题与你的代码试图实现的有点不同......但我认为我已经明白你实际上想要实现的目标......

所以，如果这是你想要实现的，那么我的解决方案就可以正常工作：你期望的是，当你点击一个显示控制元素时，其他“相似”的相关元素被隐藏但是与你点击的显示控制元素相关联的元素......有点拗口，对吧？对不起，我不是英国本地人:(

因此，尽可能通用的代码就是我在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);
}

但是，我强烈建议使用jQuery这样的javascript库进行DOM操作，不要像我一样被带走并编写vanilla javascript ...

隐藏和显示div仅工作一次

4 个答案: