Tabs for various pages requested

I've been attempting to create an anchor link that jumps to a specific heading on another page, but for some reason my anchor tab isn't working properly. I have two files - index.html and anti foam.html - that need to be linked together. However, my anchor seems unable to jump to the "Pulp and Paper Industry" section on the other page.

Here is the code from index.html:

<div class="col-md-4 col-sm-12 col-xs-12 gallery-item-wrapper nature outside">
                <div class="gallery-item">
                    <div class="gallery-thumb">
                        <img src="img/works/im2.png" class="img-responsive" alt="2nd gallery Thumb">
                        <div class="image-overlay"></div>
                        <a href="img/works/im2.png" class="gallery-zoom"><i class="fa fa-eye"></i></a>
                        
                    </div>
                    <div class="gallery-details">
                      <div class="editContent">
                          <h5><a href="antifoam.html#Pulp and Paper Industry.">Pulp and Paper Industry.</a></h5> 
                      </div>
                     
                    </div>
                </div>
            </div>

And here is the code from antifoam.html:

<section id="projects">
    <div class="container wow fadeInUp">
      <div class="row">
        <div class="col-md-12">
          <div class="card" style="width:100%">
            <img class="card-img-top cimage" src="img/antifoam/PPI.jpg" alt="Card image cap">
          <div class="card-body">
           <h3>Pulp and Paper Industry.</h3>
           <p class="cp">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
             <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
        </div>
      </div>
  </div>

</section>

I'm not sure where I'm going wrong with this setup. Any help would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

To properly link to a specific section on a webpage, you need to anchor it with an ID. For example, your index page link could look like this:

<h5><a href="antifoam.html#pulp">Pulp and Paper Industry.</a></h5>

and the corresponding anchor would be:

 <h3 id="pulp" >Pulp and Paper Industry.</h3>

Answer №2

To enhance user experience, consider implementing a "landing" <a> tag with an id, such as pulp-and-paper-industry, on your target page, like antifoam.html:

<h3>
  <a id="pulp-and-paper-industry">Pulp and Paper Industry.</a>
</h3>

Next, you can easily link to it on your source page using the href attribute:

<h5>
  <a href="antifoam.html#pulp-and-paper-industry">Pulp and Paper Industry.</a>
</h5>

Answer №3

Here's another way to tackle it:

 <a href="pagename.html#justexample"></a> <a id="justexample"></a>

I'm confident you'll figure it out. Perhaps try without using %20 and instead making it a single word. It's all about trial and error.

Beldr

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

Forwarding to another servlet based on the action of an HTML page

There are 2 servlets included in my code snippet @WebServlet("/Login") public class Login extends HttpServlet { ......... ......... } @WebServlet("/Create") public class Create extends HttpServlet { ......... ......... } Accompanied by an HTML page ...

javahtmlservlet-3.0

Easily move elements using a jQuery click animation

Having trouble animating a div's top position by -130px to move it off screen? Can't figure out why it's not working? I'm fairly new to jQuery/Javascript. I have a button/hyperlink with the ID #NavShrink. When clicked, I want the div # ...

javascriptjqueryhtmlcssjquery-animate

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

javascripthtmljquerycssvue.js

Customize the design of a React Material-UI select dropdown by overriding

I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this ...

cssreactjsmaterial-uidropdown

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

What steps can I take to restrict access to my website and make it private?

I am looking to create a secure website that can only be accessed by admin users. The homepage will be located at example.com/homepage, but regular visitors won't be able to view it. Instead, they will automatically be redirected to example.com/login. ...

htmlcssdatabase

Creating a new tab within a window that is already open

I have an interesting challenge - I need to open a new tab in a window that was previously opened using window.open(). So, if the window is already open, I want to open a tab in that same window. I have attempted to reference the existing window to open a ...

javascriptjqueryhtml

Having trouble with multiple slideshows not functioning correctly. Any ideas on how to fix this

My current challenge involves setting up multiple slideshows on a single page with navigation dots to switch between each slideshow. The issue arises when I try to incorporate more than one slideshow, as the navigation dots either stop working or begin con ...

javascripthtmlcss

Difficulty with subdomain rendering in ExpressJS

Currently, I am working on my store and facing an issue with rendering. Everything is fine for the route /category, as shown below: const CategoryOne = ((req, res) =>{ res.render('shop/category'); }); router.get('/category', Cate ...

javascripthtmlnode.jsexpressweb-deployment

Is it possible to change the order of elements in the navbar using HTML/Bootstrap depending on the state of the responsive menu toggle?

I am attempting to implement a responsive Bootstrap 4 navbar within Angular 8. When the menu is closed, the element order is correct: COMPANY, BROWSE, LOGIN The issue arises when I open the menu and the #menu receives the navbar-collapse flex attributes: ...

htmlcssangularbootstrap-4

Should one refrain from specifying a Content Type for a webpage?

I come from Brazil and currently reside here. In the Portuguese language, there are many words with accented letters. If the correct charset is not applied, these accented letters may appear as garbage when rendered on a browser. In my daily work, I often ...

htmlasp.netcharacter-encodingwebformscontent-type

Transform pixel padding into percentage ratios

I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...

javascripthtmlcsspositionpadding

Steps to activate the image viewer for each individual looping image:

I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...

javascriptphpjqueryhtmlcss

Embed map in a table with Angular 6

I am attempting to integrate a map into a table using Angular 6, but I do not have access to the "keyvalue" pipe. Below is the object I am working with... { "columns": ["col1", "col2", "col3"], "map":{ "obj 1":{ "obj aux":{ ...

htmltypescriptangular6pipe

Choose every HTML element of a specific type that appears following a designated element

Is there a way to target all p elements that follow h1, specifically those that appear later in the DOM structure? These p elements may be at the same level as h1 or nested multiple levels deep, rendering selectors like ~ or + ineffective... In this scena ...

htmlcssnokogiri

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

htmlcsssass

Is it possible to simultaneously center and display an iframe inline?

I have a YouTube video that I'm trying to center within a div. After adding display: block; to the CSS following advice from How to center an iframe horizontally?, it centers correctly, but now I want to display two images inline next to the iframe ...

htmlcssiframe

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required. Initially, the solution involved wrapping the image in a div with a relative position and using absolute ...

javascriptjqueryhtmlcss

Why is the event handler producing no value?

Imagine if I tried to attach a jQuery click event handler to one of the functions in my objects, but for some reason it keeps returning undefined on my properties. Why is this happening? var buttonView = { label : 'underscore', ...

javascripthtmljquerydomjquery-events

How can you retrieve a list of hyperlinks from a webpage based solely on the color of the associated images?

Is it possible to use Selenium Webdriver to fetch a list of hyperlinks on a webpage with red/green color bullets based on user-provided IP data? These hyperlinks are generated dynamically. For example, when a user visits and enters a specific IP address, ...

cssimageselenium-webdriverhyperlinkbackground-color