Hide/show，仅使用 DOM API 在 div 之间切换

Question

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

每个 div 都会有不同的东西，例如主要的 div 在加载时可见，其余的是隐藏的，并且根据您单击哪个按钮打开 div 而同时隐藏当前div。基本上在 divs 之间平稳切换，没有延迟等。

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

我的问题是如何通过点击一个按钮来制作一个有效的 if 语句来制作一个 div appear/visible 而当前消失并加入其他隐藏的剂量，直到我点击他们的按钮？

我不太了解JavaScript，我想了解如何做到这一点不JQuery拜托:)

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

谢谢

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

常规； plain-old-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 2

// 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();
    };

Answer 3

我可能最终无法完全理解您要尝试做的事情。但是根据您的示例，您可以将 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 4

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

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 被隐藏。

Hide/show，仅使用 DOM API 在 div 之间切换

Hide/show, switch between divs using only DOM API

html

javascript

dom

常规； plain-old-javascript 方式：

jQuery 方式