Форум

cutscript · #1 (**permalink**) 29.09.2013, 09:51

Добрый день!Подскажите пожалуйста, как сделать чтобы при нажатии на определенную ссылку текст в блоке менялся на определенный. Делаю для того, чтобы не создавать кучку станиц по каждой теме.

Изменение

ksa · #2 (**permalink**) 29.09.2013, 10:37

Сообщение от cutscript

как сделать чтобы при нажатии на определенную ссылку текст в блоке менялся на определенный

- повесить обработчик onclick() на ту ссылку
- в обработчике заменять "текст того блока" на "определенный"

Erolast · #3 (**permalink**) 29.09.2013, 10:43

Ну, вставить текст можно так:

<html>
<head>
</head>
<a href="#" onclick="document.getElementById('mydiv').innerHTML='Текст'">Ссылка</a>
<div id="mydiv">

</div>
</html>

Но это неудобно. Лучше сделать несколько div'ов, и при нажатии на ссылку скрывать/показывать их.
Вот пример: http://learn.javascript.ru/play/T0rG7b

cutscript · #4 (**permalink**) 29.09.2013, 10:46

Спасибо

, но мне нужно чтобы все происходило в одном блоке)

Erolast · #5 (**permalink**) 29.09.2013, 13:02

Ну тогда, опять же, для удобства, можно использовать переменные с текстом. Вот так:

<html>
<head>
<script>
var about_bears = "Медведи - это такие крупные толстолапые звери, обитают в лесах.";
var about_lions = "Львы - это такие крупные звери из семейства кошачих, обитают в Африке.";
var about_cats = "Кошки - это такие некрупные звери из семейства кошачих, давным-давно одомашены людьми, и, следовательно, обитают даже на МКС.";
</script>
</head>
<body>
<a href="#" onclick="document.getElementById('div_for_insert').innerHTML = about_bears">Медведи</a>
<a href="#" onclick="document.getElementById('div_for_insert').innerHTML = about_lions">Львы</a>
<a href="#" onclick="document.getElementById('div_for_insert').innerHTML = about_cats">Кошки</a>
<div id="div_for_insert">
</div>
</body>
</html>

cutscript · #6 (**permalink**) 29.09.2013, 13:35

Огромное спасибо,и еще, ты не знаешь как к этому применить функцию FadeIn?

ruslan_mart · #7 (**permalink**) 29.09.2013, 14:54

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  	<style>
      #insert {
        display: none;
      }
    </style>
  </head>
  <body>
    <a href="bears" rel="insert">Ссылка 1</a>
    <a href="lions" rel="insert">Ссылка 2</a>
    <a href="cats" rel="insert">Ссылка 3</a>
	
    <div id="insert"></div>
    
    <script>
	var bears = 'Медведи - это такие крупные толстолапые звери, обитают в лесах.';
    var lions = 'Львы - это такие крупные звери из семейства кошачих, обитают в Африке.';
	var cats = 'Кошки - это такие некрупные звери из семейства кошачих, давным-давно одомашены людьми, и, следовательно, обитают даже на МКС.';


      $(function() {
        var insert = $('#insert');
        $('a[rel="insert"]').click(function() {
          var a = $(this).attr('href');
          insert.css('display', 'none').html(window[a]).fadeIn(300);
          return false;
        });
      });
    </script>

  </body>
</html>

В href пишем имя переменной, значение которой будет выводится в #insert при клике.

cutscript · #8 (**permalink**) 29.09.2013, 15:05

Блин, сори я имел ввиду первое сообщение от Erolast((там где текст хранится не в переменных ,а в блоках http://learn.javascript.ru/play/T0rG7b Вот там я хотел FadeIn

ruslan_mart · #9 (**permalink**) 29.09.2013, 15:15

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <style>
      .insert > div {
          display: none;
      }
    </style>
  </head>
  <body>
    <a href="bears" rel="insert">Bears</a>
    <a href="lions" rel="insert">Lions</a>
    <a href="cats" rel="insert">Cats</a>
    
    <div class="insert">
    	<div id="bears">Текст о медведях</div>
      	<div id="lions">Текст о львах</div>
      	<div id="cats">Текст о кошках</div>
    </div>

    <script>
      $(function() {
        $('a[rel="insert"]').click(function() {
          $('#'+$(this).attr('href')).fadeIn(300);
          return false;
        });
      });
    </script>
  </body>
</html>

В href пишем id дива.

cutscript · #10 (**permalink**) 29.09.2013, 15:24

А как сделать чтобы старые блоки скрывались?

Форум

Справочник

Discord чат

Курсы javascript