隐藏/显示，仅使用 DOM API 在 div 之间切换

Question

我正在尝试制作几个 div 并在单击不同按钮时在它们之间切换。

每个 div 将包含不同的内容，例如主 div 在加载时可见，其余部分被隐藏，取决于您单击哪个按钮打开该 div，同时隐藏当前 div。基本上在 div 之间顺利切换，没有延迟等。

下面是我要做的，我有 2 个 div，主 div 从一开始就可见，而另一个隐藏在我的 css 中，当我点击按钮时它显示，但我的第一个 div 仍然可见，我必须单击按钮使其隐藏。

我的问题是我如何着手制作一个有效的 if 语句，通过单击一个按钮使一个 div 出现/可见，而当前消失并加入其他隐藏的 dosens 直到我点击他们的按钮？

我不太了解 JavaScript，我想了解如何做到这一点，所以请不要使用 JQuery :)

我在问如何用 div 做到这一点，因为我不知道是否有任何其他方法可以做到这一点，如果有，请分享:)

谢谢

// Div One
var mainDiv = document.getElementById('button');
mainDiv.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

// Div Two  
var upgradesDiv = document.getElementById('button2');
upgradesDiv.onclick = function() {
    var div = document.getElementById('UpgradesDiv');
    if (div.style.display !== 'block') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
};

Answer 1

我最终可能无法完全理解您想要做什么。但是根据您的示例，您可以将 div 标签包装在容器中，并将一些标识符传递给您的函数：

JS

function toggleDiv(target){

   var div = document.getElementById('wrapper').getElementsByTagName("div");

   if (target == 1) {
      div[0].style.display = 'none';
      div[1].style.display = 'block';
    } else {
      div[0].style.display = 'block';
      div[1].style.display = 'none';
    }
};

HTML

<div id="button" onclick="toggleDiv(0)">one</div>
<div id="button2" onclick="toggleDiv(1)">two</div>

<div id="wrapper">
   <div id="newpost"></div>
   <div id="UpgradesDiv"></div>
</div>

FIDDLE

Answer 2

常规;普通的旧javascript方式：

function onComplete() {
  hide(getById('newPost'));
  hide(getById('upgrades'));
  
  clickAndToggle('button1', ['newPost']);
  clickAndToggle('button2', ['upgrades']);
}

function clickAndToggle(buttonId, toggleTargetIds) {
  var mainDiv = getById(buttonId);
  mainDiv.onclick = function() {
    toggleTargetIds.forEach(function(targetId) {
      toggle(getById(targetId));
    });
  };
}

function getById(id) {
  return document.getElementById(id);
}
function toggle(el) {
  window[!isVisible(el) ? 'show' : 'hide'].call(undefined, el);
}
function hide(el) {
  el.style.display = 'none';
}
function show(el) {
  el.style.display = '';
}
function isVisible(el) {
  return el.style.display !== 'none' && el.style.visibility !== 'hidden';
}

document.onreadystatechange = function() {
  var state = document.readyState;
  if (state == 'complete') {
    onComplete();
  }
};

<input type="button" id="button1" value="Button #1" />
<input type="button" id="button2" value="Button #2" />
<br />

<div id="newPost">New Post!</div>
<div id="upgrades">Upgrades!</div>

jQuery方式

您可以使用$.hide() 和$.show() 来切换可见性。

$(document).ready(function() {
  $('#newPost').hide();
  $('#upgrades').hide();
  
  clickAndToggle('#button1', ['#newPost']);
  clickAndToggle('#button2', ['#upgrades']);

  function clickAndToggle(buttonId, toggleTargetIds) {
    $(buttonId).click(function() {
      $.each(toggleTargetIds, function(idx, targetId) {
        //if(!($(targetId).is(":visible"))){$(targetId).show();}else{$(targetId).hide();}
        $(targetId).toggle();
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="button1" value="Button #1" />
<input type="button" id="button2" value="Button #2" />
<br />

<div id="newPost">New Post!</div>
<div id="upgrades">Upgrades!</div>

Answer 3

对我来说，这似乎是最直接的方法：

var first = 'newpost';
var currentDiv = document.getElementById(first);
function addDivToggle(buttonId, divId)
{
    var button = document.getElementById(buttonId);
    var newDiv = document.getElementById(divId);
    button.addEventListener('click', function(){
        currentDiv.style.display = 'none';
        newDiv.style.display = '';
        currentDiv = newDiv;
    });
}
addDivToggle('button1', 'newpost');
addDivToggle('button2', 'UpgradesDiv');

这里我假设 'newpost' 已经可见，而其他 div 是隐藏的。

Answer 4

// The doClick() functions does what onClick() is supposed to do when clicked manually.
    // Div One
    var mainDiv = document.getElementById('button');
    mainDiv.onclick = function() {
        var div = document.getElementById('newpost');
        if (div.style.display !== 'none') {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }

      // add this function call
      upgradesDiv.doClick();
    };

    // Div Two  
    var upgradesDiv = document.getElementById('button2');
    upgradesDiv.onclick = function() {
        var div = document.getElementById('UpgradesDiv');
        if (div.style.display !== 'block') {
            div.style.display = 'block';
        } else {
            div.style.display = 'none';
        }

      // add this function call
      mainDiv.doClick();
    };