Блог

Главная - Вопросы по программированию - Ссылка на другую страницу по ссылке href и переключение скрытого текста

Ссылка на другую страницу по ссылке href и переключение скрытого текста

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я хочу нажать на ссылку на site1, которая ведет на site2, и если ссылка была нажата, скрытый текст (здесь: text_1_toggle ) на этой странице должен быть виден.

PS Я довольно новичок в этом topic..so простите меня, если я не сразу понял ваши ответы 🙂

site1:

 <html>
<head>
</head>
<body>

  <a href="site2.htm#text_1_toggle">Click me!</a>

</body>
</html>

site2:

 <html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="toggle.js"></script>
  <style>
        h4:hover
        {
            cursor: pointer; 
            cursor: hand;
        }
        #text_1_toggle
        {
            display: none;
        }
    </style>
</head>
<body> 
  <div id="site">
      <h4 id="text_1">Text 1</h4>
      <span id="text_1_toggle">     
      1 some text...
      </span>

    <h4 id="text_2">Text 2</h4>
      <span id="text_2_toggle">     
      2 some text...
      </span>   
  </div>
</body>

toggle.js

 jQuery("#site").ready(function()
{
  jQuery("#text_1").click(function()
  {
    jQuery("#text_1_toggle").toggle();
  });    

  jQuery("#text_2").click(function()
  {
    jQuery("#text_2_toggle").toggle();
  });
});

Ответ №1:

Вы можете использовать переменную для проверки события щелчка по ссылке site1, а затем использовать эту переменную на site2. Смотрите это для получения дополнительной информации: http://www.xul.fr/javascript/parameters.php

Ответ №2:

Эффект, который вы описали, может быть достигнут с помощью CSS.

Вам нужно использовать :target псевдоселектор для элемента, который вы хотите отобразить. Это даст вам возможность изменять стиль (включая настройку display ) #text_1_toggle элемента, когда вы используете этот хэш в URL, например, в ваш CSS можно добавить следующее:

 #text_1_toggle:target {
    display: inline;
}
Метки: