在兩組文本之間切換

我在網頁上有兩段文字，並且希望一次只能看到其中的一段文字。理想情況下，我想通過頁面頂部的一組按鈕來實現這一點，可能通過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>

來源

2014-04-30 user3590219

有點多搜索會給你答案：http://stackoverflow.com/questions/14720054/jquery-toggling-between-two-different-divs-on-button-click – gurudeb

歡迎來到SO。請不要在評論中留下冗長的代碼。 – isherwood

感謝您的協助。我只是在經過漫長的搜索之後發佈的，其中我只找到了預製翻譯切換的答案，這並不是我之前的做法。 – user3590219

您可以將它們放置在不同的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>

我希望這是對你有所幫助。

來源

2014-04-30 17:03:59

這看起來不錯，我可以在代碼中看到它應該做我需要做的事情。不幸的是，當我預覽它時，該按鈕似乎不起作用。 – user3590219

嘗試使用我剛剛編輯的編輯 –

謝謝。我有一個去，但我仍然無法正常工作。請參閱上面的新編輯。我感謝您的幫助。 – user3590219

在兩組文本之間切換

回答

相關問題