ссылка на ту же страницу в html

ProgramBox

ссылка на ту же страницу в html

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я хочу дать ссылку на ту же страницу, используя html. Например, я Сюзант Дей, получила степень магистра в ИИТ Дели.

В этом предложении предположим, что я дал ссылку на master, и когда я нажму на эту главную ссылку, в этом конкретном месте будет добавлено новое предложение.(Например, после щелчка по главной ссылке должен отображаться мастер компьютерного приложения).

Полный вывод должен быть Я Сюзант Дей, получил степень магистра компьютерных приложений в ИИТ Дели. Код, который я написал

 <html>
   <body>
   i am susant dey completed my <a href="#anchor" id="check">master </a>degree from IIT Delhi.
   </body>
 </html>

Я должен использовать только html.

1. что вы пробовали до сих пор? вам также нужно использовать javascript или jquery, чтобы достичь того, чего вы хотите.

2. Чтобы сделать то, что вы пытаетесь сделать, вам придется использовать не только HTML, вам нужно будет использовать JavaScript.

Ответ №1:

В этом случае вы не сможете этого сделать. Для захвата click события вам нужно использовать JavaScript. Для разработки динамических веб-страниц требуется JavaScript.

Вы можете использовать JavaScript для создания функции, которая вызывается, как только пользователь нажимает на этот master элемент. Тогда он либо сделает содержимое видимым, либо создаст новое содержимое DOM. Но это зависит от дальнейших требований. До тех пор вам следует изучить что-то вроде JavaScript, HTML этого не сделает. HTML не был разработан для этой функции.

Вы можете сделать это следующим образом

 <a href="#anchor" onclick="showcontent()" id="check">master</a>
<div id="#anchordetails" style="display: none">Content here...</div>

Вверху находится часть HTML, содержимое сейчас скрыто, ниже будет часть JavaScript

 function showcontent() {
  document.getElementById("anchordetails").style.display = "inline-block";
}

Приведенный выше код сделает содержимое видимым для пользователя.

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

https://developer.mozilla.org/en/docs/Web/JavaScript (JavaScript)

https://developer.mozilla.org/en/docs/Web/API/Event (События в HTML)

http://jquery.com Если вы когда-нибудь застрянете на длинном JS-коде, сведите его к минимуму с помощью jQuery. Это лучше!

Ответ №2:

В HTML5 вы можете использовать <details> элемент, чтобы сделать что-то подобное. Например:

 <details>
    <summary>i am susant dey completed my master degree from IIT Delhi.</summary>
    <p>More details. More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.More details.</p>
</details>

Пример jsFiddle

<summary> Элемент будет содержать короткий текст, на который вы хотите, чтобы пользователь нажал, и то, что следует за ним, будет показано при нажатии на него.

Ответ №3:

На самом деле, вы можете сделать это только в CSS, но это НЕ самый оптимальный способ обработки такой функциональности. JavaScript — лучшее решение для этого. Но, в качестве доказательства концепции, это можно сделать.

Вот jsfiddle: http://jsfiddle.net/PX6BB/1 /

Вот HTML-код:

 DRD's Website: (<div class = "siteDisplay">
    <input type = "checkbox" id = "showSite" />
    <label for = "showSite">show site</label>
    <label for = "showSite">http://www.functionalcss.com/</label>
</div>).

Код CSS:

 .siteDisplay {
    display: inline;
}

.siteDisplay > label {
    cursor: pointer;
}

.siteDisplay > input,
    .siteDisplay > input   label   label {
    display: none;
}

.siteDisplay > input:checked   label {
    display: none;
}

.siteDisplay > input:checked   label   label {
    display: inline;
}

Метки: ссылка на ту же страницу в html