正;普通的javascript方式：

Question

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

每个div都会保存不同的内容，例如主div在加载时可见，其余部分是隐藏的，并且根据您单击哪个按钮打开该div，同时隐藏当前div。基本上可以毫无延迟地平滑切换div。

下面是我得到的，我有2个div，主要div从get go中可见，而另一个隐藏在我的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方式：

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery方式

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

4 个答案:

正;普通的javascript方式：

jQuery方式