What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link.

Here is my website:

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

I am looking to customize the links to show specific text upon clicking. Right now, they just redirect to the same page. How can I modify it so that clicking the link displays relevant information on the page?

javascriptcsshtml

Answer â„–1

There are multiple methods to achieve this, but here's a straightforward approach: You'll require a DIV element to accommodate the text.

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

For the Href links, incorporate something similar to the following code snippet:

<a onmouseover="document.getElementById('uniquename3').innerHTML = 'Mammals\,some intriguing information about mammals\, more fascinating facts about mammals';ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">Mammals</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

Learn how to use JavaScript to dynamically display and hide elements based on user interaction.

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>Discover the World of Animals</h1>
  <p>Welcome to our Animal Encyclopedia! Although still a work in progress, we offer a small selection of interesting animals that you can learn about. Click on "Sign Up" to receive updates when more animals are added.
  </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">Sign Up</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Working with JSON data retrieved from a PHP and MySQL backend in an AngularJS application

Having difficulty handling the JSON response from PHP. I am using AngularJs to display the received JSON data. As a newcomer to Angular, I attempted a basic exercise and would appreciate some assistance. Thank you in advance. index.html <!DOCTYPE HTML ...

javascriptphpmysqlangularjsjson

Maximizing performance with internal Bootstrap?

An interesting concept to consider is that the fastest website could actually be an empty webpage. Each additional piece of data added compromises performance, yet it's the server's responsibility to send all the code to the client. When using ...

htmlcssperformancebootstrap-4

Why is my res.data returning an array of objects in AngularJs?

I've been working on integrating an API with AngularJS and trying to display the data using ng-repeat, but I'm facing challenges in accessing the object's information. Below is the feedback I received: (20) [{…}, {…}, {…}, {…}, {†...

javascriptangularjs

What is the best method for executing an HTTP request to retrieve the complete source page if certain aspects are loaded through JavaScript?

I am trying to retrieve the HTML webpage from . However, a portion of the HTML file is loaded through JavaScript. When using HTTP.jl to fetch the webpage with HTTP.request(), I only receive the part of the HTML file that was loaded before the execution of ...

javascriptseleniumhttpweb-scrapingjulia

Leverage recursion for code optimization

I'm currently working on optimizing a function that retrieves JSON data stored in localStorage using dot notation. The get() function provided below is functional, but it feels verbose and limited in its current state. I believe there's room for ...

javascriptjsonrecursionfunctional-programming

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

Is there a way to align the image block-grid from left to right?

Is there a way to change the alignment of images in the x-block-grid four-up class to be RTL on this page? () I have managed to make the h2 tag RTL using the following code: <h2 class="h-custom-headline h5 accent" dir="rtl"><span>Code</spa ...

htmlcssalignment

Guide to activating a function by tapping anywhere on a webpage in iPhone Safari

I am attempting to implement a jQuery function that will change the text of a div in the iPhone browser when any area of the page is clicked. Here is my current setup: <div id="alternative_text">traduit</div> <script type="text/javascript ...

javascriptjqueryiphonesafariwebview

ESLint is reminding you that the `parserOptions.project` setting must be configured to reference the tsconfig.json files specific to your

Within my NX Workspace, I am developing a NestJS-Angular project. Upon running nx lint, an error is triggered with the following message: Error: A lint rule requiring the TypeScript type-checker to be fully available has been attempted, but `parserOptions. ...

javascriptnode.jstypescripteslinttypescript-eslint

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

javascripthtmllistarraylist

Received the error 'Headers cannot be set after they have been sent to the client' upon the second request

I created a web server that acts as a client-side application using socket.io-client and express. This setup is necessary for another project I am working on. The web server emits the posted string and responds by sending the served string when it receive ...

javascriptexpresssocket.io

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

I'm feeling frustrated as I try to work with Zurb Foundation sections. I've updated to the latest version 4.3.1. Following the documentation provided here: but encountering strange behavior while navigating through results. Refer to the screen ...

javascripthtmlcsszurb-foundation

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

After installing Ember and running the Ember server, I noticed that the node_modules directory appears to be empty. This issue is occurring on my Windows 10 x64 PC

Welcome to the command console: C:\Users\Documents\emberjs>ember server node_modules seem to be empty, consider running `npm install` Ember-cli version: 2.14.2 Node version: 6.11.2 Operating System: Windows 32-bit x64 I'm a beg ...

javascriptember.jsnpmember-clinpm-install

iOS Safari browser does not support changing the caret color in textarea

Seeking a solution to hide the text cursor (caret) from a textarea on iOS browsers like Safari and Chrome. Despite trying the caret-color property, it does not seem to work. Are there any alternative methods to achieve this? One approach I attempted is b ...

javascripthtmlcssiossafari

Adjust the background color of the body content to reflect changing content

How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed. Site.css /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { ...

css

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

What is the most effective method for nesting loops in NodeJS and Mocha?

Currently, I am attempting to create a loop within a loop in my NodeJS code, but I seem to be getting lost along the way. The results are not as expected - sometimes callbacks are triggered twice and so on. My approach involves using the async module. I wo ...

javascriptnode.jsasynchronouscallbackmocha.js

Ways to resolve the issue of data-bs-target not functioning properly in Bootstrap version 5

While viewing the Job screen in the following image, I attempted to click on "Personal," but it remained stuck on the Job screen. ...

javascriptvbscriptasp-classicbootstrap-5

Choose checkboxes based on the checkboxes that were previously selected

My goal is to have a checkbox automatically selected based on the previously selected checkbox. For example, if I select the first checkbox (which has a specific class), then only the checkbox with the same class as the first one should be selected using j ...

javascriptjqueryhtmlcheckbox