как бы сделать ссылку показать текст - PullRequest
Новая
       0

как бы сделать ссылку показать текст

0 голосов
/ 10 декабря 2018

У меня очень простая страница, я хочу иметь возможность показывать текст по ссылке.

Вот моя веб-страница: 

<!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>

Я хочу, чтобы ссылки о животных отображали текст, который я знаю прямо сейчас, я настроил его, чтобы перейти на страницу, на которой он уже есть.Но как мне поступить так, чтобы при нажатии на ссылку текст на тему появлялся на странице?

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Вот пример использования 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>
0 голосов
/ 10 декабря 2018

Множество способов сделать это, но вот простой способ. Вам понадобится 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"; }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...