Javascript 在两组文本之间切换_Javascript_Jquery_Toggle

Javascript 在两组文本之间切换

javascript jquery

Javascript 在两组文本之间切换,javascript,jquery,toggle,Javascript,Jquery,Toggle,我在一个网页上有两段文字，希望一次只能看到其中一段。理想情况下，我希望通过页面顶部的一组按钮实现这一点，可能是通过javascript或jquery 编辑：我目前正在使用以下代码。一切都是可见的，按钮是“可点击的”，但当我点击按钮时，什么也没有发生 <!DOCTYPE html> <html> <body> <h1>What OCA should do next</h1> <div id='Content'> <d

我在一个网页上有两段文字，希望一次只能看到其中一段。理想情况下，我希望通过页面顶部的一组按钮实现这一点，可能是通过javascript或jquery

编辑：我目前正在使用以下代码。一切都是可见的，按钮是“可点击的”，但当我点击按钮时，什么也没有发生

<!DOCTYPE html>
<html>
<body>

<h1>What OCA should do next</h1>

<div id='Content'>
<div id='1'><p>THIS IS TEXT 1</p></div>
<div id='2' style='display:none;'><p>THIS IS DEFINITELY NOT TEXT 1</p></div>
</div>

<button type="submit" value="Submit">Submit</button>
<script>
var shown = 1;
$("#Submit").click(function() {
   if(shown == 1) {
      $("#text1").css("display", "none");
      $("#text2").css("display", "block");
      shown = 2;
   } 
   else {
      $("#text2").css("display", "none");
      $("#text1").css("display", "block");
      shown = 1;
   }
});
</script>
</body>
</html>


亚奥理事会下一步应该做什么
这是文本1
这绝对不是文本1
提交
所示var=1；
$（“#提交”）。单击（函数（）{
如果（显示==1）{
$（“#text1”）.css（“显示”、“无”）；
$（“#text2”）.css（“显示”、“块”）；
所示=2；
} 
否则{
$（“#text2”）.css（“显示”、“无”）；
$（“#text1”）.css（“显示”、“块”）；
所示=1；
}
});

您可以将它们放在内容div内的不同div中，并在不同的时间显示它们：

<div id='Content'>
   <div id='text1'><p>THIS IS TEXT 1 </p></div>
   <div id='text2' style='display:none;'><p>THIS IS DEFINITELY NOT TEXT 1 </p></div>
</div>
<a id='changeText'>CHANGE</a>
<!-- Style the <a> To make it look like a button -->
<script>
   var shown = 1;
   $("#changeText").click(function() {
       if(shown == 1) {
          $("#text1").css("display", "none");
          $("#text2").css("display", "block");
          shown = 2;
       } else {
          $("#text2").css("display", "none");
          $("#text1").css("display", "block");
          shown = 1;
       }
   });
</script>


这是文本1
这绝对不是文本1
改变
所示var=1；
$（“#changeText”）。单击（函数（）{
如果（显示==1）{
$（“#text1”）.css（“显示”、“无”）；
$（“#text2”）.css（“显示”、“块”）；
所示=2；
}否则{
$（“#text2”）.css（“显示”、“无”）；
$（“#text1”）.css（“显示”、“块”）；
所示=1；
}
});

我希望这对您有所帮助。

再多搜索一下，您就会得到答案：欢迎访问SO。请不要在注释中添加冗长的代码。感谢您的帮助。我只是在长时间搜索后才发布的，在搜索中我只找到了预制翻译切换的答案，这不是我想要的。这看起来不错，我可以从代码中看到它应该做我需要它做的事情。不幸的是，当我预览该按钮时，该按钮似乎不起作用。请尝试使用我刚才编辑的按钮。我试过了，但还是不能让它正常工作。请参见上面的新编辑。非常感谢您的帮助。据我所知，您犯了一个语法错误：如果要检查内容，必须使用比较运算符，例如：==！=>=谢谢，我已经按照建议做了更改，但不幸的是，它仍然不起作用。为了反映这一点，我将我的原始代码更改为post。如蒙进一步帮助，我将不胜感激。