Javascript：如何通过单击按钮在另一个div的位置显示div？

-1

在给定的例子，我要为#rightdiv是最初的#rightdivOne应显示在#rightdiv和#rightdivTwo或#rightdivThree不应显示，然后在submit按钮的点击，#rightdivTwo应显示在的地方#rightdivOne（以便#rightdivOne不再可见），然后再点击submit按钮，#rightdivThree显示在同一个地方。Javascript：如何通过单击按钮在另一个div的位置显示div？

页面的其余部分应保持静态。

是否有可能通过Javascript来做到这一点？我无法使用AJAX。而且，我不喜欢使用JQuery，只会将其用作最后的手段。如果这是可能的，有人可以指导我如何？

JSFiddle here.

<div id="leftrightdiv" style="width:380px; padding-left:10px; padding-right:10px; background-color:grey; height:400px;"> 
    <div id="leftdiv" style="width:190px; float:left; overflow:auto; background-color:#7bbe7b; height:400px;"></div> 

    <div id="rightdiv" style="width:190px; float:right; overflow:auto; background-color:#87ccd1; height:400px;"> 
     <div id="rightdivOne" style="width:100%; float:right; background-color:#25dcea; height:400px;"> 
      <p>I am the statement of the question. I am the statement of the question. I am the statement of the question. I am the statement of the question. </p> 
      <div><input type="radio" name="radiorightdivTwo" value="Option One"> 
      <label>Option One</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Two"> 
      <label>Option Two</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Three"> 
      <label>Option Three</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Four"> 
      <label>Option Four</label></div> 
      <span style="float:right; margin:50px;"><input type="submit" value="Submit"></span> 
     </div> 
     <div id="rightdivTwo" style="width:100%; float:right; background-color:#d1879b; height:400px;"> 
      <p>I am the statement of the question. I am the statement of the question. I am the statement of the question. I am the statement of the question. </p> 
      <div><input type="radio" name="radiorightdivTwo" value="Option One"> 
      <label>Option One</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Two"> 
      <label>Option Two</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Three"> 
      <label>Option Three</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Four"> 
      <label>Option Four</label></div> 
      <span style="float:right; margin:50px;"><input type="submit" value="Submit"></span> 
     </div> 
     <div id="rightdivThree" style="width:100%; float:right; background-color:#8f63f2; height:400px;"> 
      <p>I am the statement of the question. I am the statement of the question. I am the statement of the question. I am the statement of the question. </p> 
      <div><input type="radio" name="radiorightdivTwo" value="Option One"> 
      <label>Option One</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Two"> 
      <label>Option Two</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Three"> 
      <label>Option Three</label></div> 
      <div><input type="radio" name="radiorightdivTwo" value="Option Four"> 
      <label>Option Four</label></div> 
      <span style="float:right; margin:50px;"><input type="submit" value="Submit"></span> 
     </div> 
    </div> 
</div>

注： - 我使用内联CSS的一个原因。所以请不要在此基础上。

来源

2014-09-12 Solace

请出示我们尝试过的JavaScript，并让我们知道出了什么问题。 – showdev 2014-09-12 20:40:11

@showdev我没有尝试任何东西。我不知道该怎么做，该怎么做。所以如果有人能给我一个线索，你可以通过使用这个来做到这一点，然后做这件事，我可以写一些JS代码和Google的东西。 – Solace 2014-09-12 20:57:57

@showdev我只知道它可以使用卡布局在Java中完成，所以它也必须可以在Web应用程序中使用（并且我已经看到带有动态内容的应用程序），所以必须有一种方法。我需要知道那是什么。 – Solace 2014-09-12 20:59:14

您可以用简单的香草JS做到这一点，甚至做你的onclick事件的内联（除非你想唯一ID添加到您的每一个提交按钮，那么你可以使用事件侦听器）：demo

// here is the javascript function to change elements 
function nextPg(oldpage, newpage) { 
    document.getElementById(oldpage).style.display = "none"; 
    document.getElementById(newpage).style.display = "block"; 
} 

// add the following to the submit button html 
<input type="submit" value="Submit" onclick="nextPg('rightdivOne','rightdivTwo');"> 

// and lastly, each subsequent 'page' needs to start out with 'display: none;' style 
<div id="rightdivTwo" style="width:100%; float:right; background-color:#d1879b; height:400px; display: none;">

来源

2014-09-12 21:17:50 JRulle

我刚刚创建了Fiddle可以一起工作：

$("input[type='submit']").click(function() { 
    if ($("#rightdivOne").is(':visible')) { 
    $("#rightdivOne").fadeOut('fast', function() { 
     $('#rightdivTwo').fadeIn('fast'); 
    }); 
    } 
    else 
    { 
    $("#rightdivTwo").fadeOut('fast', function() { 
     $('#rightdivThree').fadeIn('fast'); 

    }); 
} 
});

我想在接下来的步骤中，您想检查哪些DIV使用单选按钮选择，并切换到所选择的DIV当提交被点击时。现在，这只是根据需要用下一个替换当前div，作为您可以从头开始的一种示例。虽然你提到你更喜欢一个纯粹的JavaScript解决方案和jQuery作为最后一个选项 - 它只是用jQuery更快完成，我可以在Javascript中添加相同的内容。正如我注意到应该显示的div在测试js之前有相同的副本，我刚刚添加了第1，第2和第3到html（仅调整），但颜色的变化可能足够指示divs更换。

来源

2014-09-12 21:00:48

您是否也编辑过HTML？ – Solace 2014-09-12 21:10:53

只有div中的副本（添加了第一，第二，第三）来表示div被替换。 – 2014-09-12 21:13:59

“我可以在Javascript中添加相同内容”，这可以在没有JQuery的情况下完成吗？ – Solace 2014-09-12 21:15:30

Javascript：如何通过单击按钮在另一个div的位置显示div？

回答

相关问题