У меня есть два абзаца текста на веб-странице и хотелось бы, чтобы только один из них был видимым одновременно. В идеале, я хотел бы достичь этого с помощью набора кнопок в верхней части страницы, возможно, через javascript или jquery?
EDIT: В настоящее время я работаю со следующим кодом. Все видно, кнопка "clickable", но ничего не происходит, когда я нажимаю кнопку.
<!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>
Вы можете поместить их в разные 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>
Надеюсь, это поможет вам.