Question

我想使用html来引用同一页面。像例子我是Susant dey，在IIT德里完成了我的硕士学位。

在这句话中假设我已经给出 master 的链接，当我点击这个主链接时，会在那个特定的地方添加一些新句子。（如点击主链接后点击计算机大师应用程序应显示）。

完整的输出应该是我是Susant dey，从IIT德里完成了我的计算机应用硕士学位。我编写的编码

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

我必须只使用html。

Answer 1

在这种情况下，你无法做到。要捕获click事件，您需要使用JavaScript。开发动态网页需要JavaScript。

一旦用户单击此master元素，您就可以使用JavaScript创建要调用的函数。然后它将内容设置为可见，或者将创建新的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将其最小化。它更好！

Answer 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 example

<summary>元素将包含您希望用户点击的短文，以及点击它后显示的内容。

Answer 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中的同一页面

3 个答案: