Переключение между двумя наборами текста

Question

Переключение между двумя наборами текста

0

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

user3590219 30 апр. 2014, в 19:33

Источник

0

Немного больше поиска дало бы вам ответ: stackoverflow.com/questions/14720054/…
gurudeb 30 апр. 2014, в 17:00
0

Добро пожаловать в ТАК. Пожалуйста, не помещайте длинный код в комментарии.
isherwood 30 апр. 2014, в 17:06
0

Спасибо за помощь. Я только отправил после длительного поиска, в котором я только нашел ответы на предварительно сделанные переключатели перевода, который не был тем, что я был после.
user3590219 01 май 2014, в 10:20

Показать ещё 1 комментарий

Теги:

javascript

jquery

toggle

1 ответ

Ещё вопросы

Немного больше поиска дало бы вам ответ: stackoverflow.com/questions/14720054/…
Добро пожаловать в ТАК. Пожалуйста, не помещайте длинный код в комментарии.
Спасибо за помощь. Я только отправил после длительного поиска, в котором я только нашел ответы на предварительно сделанные переключатели перевода, который не был тем, что я был после.

Max Langerak · Answer 1 · 2014-04-30T14-09-00.000Z

Вы можете поместить их в разные 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>

Надеюсь, это поможет вам.

Это выглядит хорошо, и я вижу в коде, что он должен делать то, что мне нужно. К сожалению, кнопка не работает при предварительном просмотре.
Попробуйте использовать редактирование, которое я только что сделал
Спасибо. Я попробовал, но я все еще не могу заставить его работать должным образом. Пожалуйста, смотрите выше для нового редактирования. Я ценю вашу помощь.
Насколько я вижу, вы допустили синтаксическую ошибку: если вы хотите что-то проверить, вы должны использовать операторы сравнения, такие как: ==! => = <= И т. Д. То, что вы делаете, это: if(shown = 1) { который является оператором присваивания. Попробуйте изменить его на: if(shown == 1) { это должно помочь.
Спасибо, я внес изменения, как было предложено, но, к сожалению, они все еще не работают. Я изменил свой код в оригинале, чтобы опубликовать, чтобы отразить это. Буду признателен за любую дополнительную помощь, которую вы можете предложить мне.
Ааа, я пропустил это: вы используете кнопку отправки для вызова функции щелчка, и вы вызываете ее по идентификатору (вот что обозначает #Submit ). Чтобы вызвать его, вы можете изменить кнопку: <button type='submit' value='Submit' id='Submit'>Submit</button> Таким образом, вы сможете вызвать его :)