Question

我有一个非常简单的页面，我希望能够显示链接中的文本。

这是我的网页：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Encyclopedia</title>
  <link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>This is our Encyclopedia about animals</h1>
  <p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
    to your email for when we have a more updated selection
  </p>
  <nav id=n av1>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="ImageGallery.html">Image gallery</a></li>
      <li><a href="SignUp.html">SignUp</a></li>
    </ul>
  </nav>
  <nav id=n av3>
    <ul>
      <li><a href="encyclopedia.html">Marine life</a></li>
      <li><a href="encyclopedia.html">Mammals</a></li>
      <li><a href="encyclopedia.html">Birds</a></li>
      <li><a href="encyclopedia.html">Reptiles</a></li>
      <li><a href="encyclopedia.html">Amphibians</a></li>
    </ul>
  </nav>
</body>

</html>

我希望有关动物的链接显示我现在知道的文本，我已将其设置为转到已经打开的页面。但是我该怎么做，以便当我单击有关该主题的链接文本时出现在页面上？

Answer 1

很多方法，但这是一种简单的方法您将需要DIV来填充文本

<div id="uniquename3" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;width:120px;">Content goes here.</div>

在Href上，您需要这样的东西。

<a onmouseover="document.getElementById('uniquename3').innerHTML = 'Mammels\,some interesting info about mammels\, more interesting info about mammels';ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">Mammels</a>


// http://bontragerconnection.com/ and http://willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}

Answer 2

这是一个使用js根据单击的链接显示和隐藏元素的示例。

const app = {
  init: function() {
    document.querySelectorAll(".link").forEach(link => {
      link.addEventListener("click", app.nav);
    });
  },
  nav: function(ev) {
    ev.preventDefault();
    let currentPage = ev.target.getAttribute("data-target");
    let content = document.querySelectorAll('.content')
    for(i = 0; i < content.length; i++) {
      if(content[i].classList.contains('showing')) {
        content[i].classList.remove("showing");
      }
    }
    document.getElementById(currentPage).classList.add("showing");
  }
};
document.addEventListener("DOMContentLoaded", app.init);

.content {
  display: none;
}
.showing {
  display: block;
}
#marine-life {
  background: green;
}
#mammals {
  background: blue;
}
#birds {
  background: yellow;
}
#reptiles {
  background: purple;
}
#amphibians {
  background: red;
}

<body>

  <h1>This is our Encyclopedia about animals</h1>
  <p>Hello this is our Animal encyclopedia so far were still working hard to make it equal to other websites we do have a very small selection of animals you can learn about right now. It's really vauge but if you click sign up you can get updates straight
    to your email for when we have a more updated selection
  </p>
  <nav id=n av1>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="ImageGallery.html">Image gallery</a></li>
      <li><a href="SignUp.html">SignUp</a></li>
    </ul>
  </nav>
  <nav id=n av3>
    <ul>
      <li><a class="link" data-target="marine-life" href="#">Marine life</a></li>
      <li><a class="link" data-target="mammals" href="#">Mammals</a></li>
      <li><a class="link" data-target="birds" href="#">Birds</a></li>
      <li><a class="link" data-target="reptiles" href="#">Reptiles</a></li>
      <li><a class="link" data-target="amphibians" href="#">Amphibians</a></li>
    </ul>
  </nav>
  <div id="contentWrap">
    <div id="marine-life" class="content">
      <h1>Marine Life</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>    
    <div id="mammals" class="content">
      <h1>Mammals</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
    <div id="birds"class="content">
      <h1>Birds</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
    <div id="reptiles" class="content">
      <h1>Reptiles</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
    <div id="amphibians" class="content">
      <h1>Amphibians</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis pellentesque libero. Praesent hendrerit justo hendrerit lacus rutrum, sit amet cursus arcu molestie. Duis libero ipsum, blandit at nisl vitae, convallis lobortis nulla. In pulvinar tempor justo, ut lacinia ligula vestibulum quis. Quisque elementum urna nisl, eget laoreet dolor pulvinar sit amet. Etiam in lacus feugiat, imperdiet nunc et, consectetur dui. Quisque tempor nisl dui, ac vulputate erat dictum sit amet. Quisque et orci ut eros imperdiet commodo et eget diam. Nulla facilisi. Suspendisse volutpat, ligula id eleifend dignissim, leo urna iaculis massa, eu eleifend nisi urna ut tortor. Vestibulum.</p>
    </div>
  </div>

</body>

我将如何使链接显示文本

2 个答案: