Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out.

Here is the HTML code snippet:

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
  </head>
  <body>
    <div class="row" style="margin:10px;">
      <div id="blocka" class="column col-md-6" style="padding:20px;width:150px;height:150px;background-color:#DA0A82">
        <ul>
          <li>
            <a style="font-family:perpetua;font-size:16px;color:white;" href="about.php">About</a>
          </li>
          <li id="family" class="family" style="font-family:perpetua;font-size:16px;color:white;">Family</li>
          <li id="ent" class="ent" style="font-family:perpetua;font-size:16px;color:white;">Enterprise</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">News &amp; Media</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">Resources</li>
        </ul>
      </div>
      <div id="familyNav" class="familyNav column col-md-6"
      style="margin-left:10px;padding:20px;width:150px;height:150px;background-color:#7D0651">
        <ul>
          <li style="font-family:perpetua;font-size:16px;color:white;">Timeline</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">Tree</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">Biographies</li>
        </ul>
      </div>
      <div id="enterprise" class="enterprise column col-md-6"
      style="margin-left:10px;padding:20px;width:150px;height:150px;background-color:#7D0651">
        <ul>
          <li style="font-family:perpetua;font-size:16px;color:white;">Parimal K. Shroff &amp; Co.</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">Sunways Group</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">Organograms</li>
          <li style="font-family:perpetua;font-size:16px;color:white;">The Shroffice</li>
        </ul>
      </div>
    </div>
  </body>
</html>

The Jquery and CSS being used are as follows:

<script>
$('.family').click(function () {
    $('#enterprise').hide(); 
    $('#familyNav').slideToggle('2000',"swing", function () {
        // Animation complete.
    });
});
$('.ent').click(function () {
    $('#familyNav').hide(); 
    $('#enterprise').slideToggle('2000',"swing", function () {
        // Animation complete.
    });
});
</script>

<style>
#blocka {
    z-index: 100;
}
#familyNav {
    display:none;
}
#family {
    cursor:pointer;
}
#enterprise {
    display: none;
}
#ent {
    cursor: pointer;
}
</style>

Edit : Despite showing the correct URL (localhost/directories/about.php) on mouse hover, clicking the link does not redirect to localhost/about.php as intended.

Answer №1

Should this HTML file be located within the 'www' directory, it will automatically redirect to 'localhost/about.php'. However, if the file is within 'www/shroff/home/', the redirection will be relative to 'localhsot/shroff/home/about.php'.

Answer №2

Have you considered using a relative path such as "./about.php" if the about page is located in the same folder as the index file? It might simplify your directory structure and make navigation easier.

Answer №3

Give this a shot, it could potentially solve the issue...

<?php
    $siteRoot='http://'.$_SERVER['HTTP_HOST'].str_replace(basename($_SERVER['SCRIPT_NAME']), '', $_SERVER['SCRIPT_NAME']);
?>
<a href="<?php echo $siteRoot;?>/about.php">Learn More About Us</a>

Answer №4

Assuming the directory structure is as follows:

htdocs or www (DEPENDING ON SERVER)
|
|--Vshroff
      |--NEW
          |--home
             |
             |-index.php(ANCHOR TAG HERE)
             |-about.php

I replicated the same structure on my computer. Below are the files:

index.php

<?php
echo '<a href="about.php">about</a>';
?>

about.php

<?php
echo '<a href="index.php">index</a>';
?>

It works perfectly.

Answer №5

The issue seems to be related to the JQuery file, as after removing it, everything returned to normal. Despite not being able to pinpoint the exact cause of the error, eliminating the jQuery file resolved the issue.

It appears that I can manage without that particular file.

I appreciate the help from everyone.

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

Issue with JQuery mobile: dynamically inserted popup fails to appear

Can you help me troubleshoot an issue with my function? It's supposed to take a text string and output the text surrounded by '¬¬¬' in a button with a pop-up menu attached. The button looks fine, but when clicked, the popup ul list doesn& ...

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

What is the best way to deactivate select option(s) based on the JSON data retrieved through AJAX?

I am facing an issue with a dropdown menu that contains several options. My goal is to loop through these options and set the disabled attribute on specific ones based on the result of an Ajax call. https://i.sstatic.net/9k3f9.png This is what I am tryin ...

evt.target consistently returns the initial input within the list of inputs

My React file uploader allows users to attach multiple file attachments. Each time a user clicks on an input, I retrieve the data-index to identify the input position. renderFileUploader() { let file_attachment = this.state.file_attachment.map(fun ...

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

Although I have a good understanding of CSS and HTML, my knowledge of Javascript is limited. I am looking to add an interactive element to my website where an image enlarges gradually when clicked and smoothly moves to the center of the screen in one con ...

Both Firefox and Chrome are unable to properly decode base64-encoded image or pdf files

I'm having trouble displaying base64 encoded images on Chrome and Firefox browsers using the data uri scheme. My current HTML code is: <img src="data:image/png;base64,base64_string_here" alt="base64 image name" width="600" height="400" border= ...

(Reactjs) Steps to automate submission of file upon selection

I'm having trouble figuring out how to automatically submit an image using an input field without a submit button. My current approach involves selecting the file and then submitting it automatically. Here's what I have so far: const [image, setI ...

Retrieve information from hyperlinks and organize it into a structured format in a chart

Is there a way to extract href data from a website page and input it into a table using jQuery? I often have clients who need me to transfer links from their old sites to my CMS. If we can put these links into a spreadsheet format, it would make importing ...

The click event will only be activated upon refresh

Here's my issue: I've set up a page with some buttons and a jQuery script that looks like this: $( document ).bind( 'mobileinit', function(){ $.mobile.loader.prototype.options.text = "loading"; $.mobile.loader.prototype.option ...

The final item in the navigation bar is off-center

After centering all text within the li tags, the last one appears to be slightly closer to the bottom. Below is the code snippet along with an image: *{ margin:0; padding:0; box-sizing:border-box} #hamburgerClick{ displa ...

Flex items maintaining their size when the window decreases

My goal is to arrange two plotly plots side by side within a CSS flexbox, with the ability to resize them as the window size changes. The issue I'm facing is that while the plots expand correctly when the window is enlarged, they fail to shrink when t ...

When the second click triggers the loading of a JSON lot via AJAX

As a newcomer to jQuery and ajax, I am in the process of developing an application where content is loaded from a JSON file based on the navigation option selected. Here is the code snippet I've been working on: $(document).ready(functi ...

Submitting Prestashop form using Ajax - Retrieving data with Tools::getValue()

Hello, I am trying to save a form into the PrestaShop database using AJAX, but I am facing some challenges. Let me share my attempt with you. HTML Form: <form action="" method="POST" class=""> <textarea name="question_content" row="4" class=" ...

Inserting items into an array entity

I am attempting to insert objects into an existing array only if a certain condition is met. Let me share the code snippet with you: RequestObj = [{ "parent1": { "ob1": value, "ob2": { "key1": value, "key2": va ...

Tips for effectively utilizing foreach loops in JQuery

I've encountered an issue while displaying a list of data in a table using Smarty templates and foreach loops. I'm trying to make each line clickable to show new data below it, but currently, this functionality only works for the first line. Is t ...

Leveraging Vue's "v-slot" functionality to create a specified slot within a JavaScript object

I have turned to this platform seeking guidance on using "v-slot" while utilizing a syntax that involves a javascript object. This specific method was introduced in the online course Intro to Vue3 which I recently completed. Below is an image de ...

Using JSON with PDO may not be possible, however, it is compatible with the mysql_ functions

Even though this code functions perfectly, I encountered an issue when attempting to utilize JSON as it fails to display any data. The problem arose when I made an effort to transition all of my codes to PDO due to the fact that I was informed about the d ...

Tips for testing an HTML email in different email platforms before finalizing the send. Utilizing PHP and Javascript for optimum results

After creating a web app that sends HTML emails using PHP, I wanted to implement a feature that allows users to preview how the email will appear in different email clients such as Outlook and Gmail before sending it out. Despite searching for plugins tha ...

What is the best way to modify the styling of my CSS attributes?

I'm currently working with this CSS code: input:checked + .selectablelabel .check { visibility: hidden; } Now, I want to change the visibility property to "visible" using JavaScript. I attempted the following: $(document).on('click', & ...

Tips for locating an element within pre-processed HTML content

Is there a way to modify this code snippet to target the 'price' element within each 'info_block' instead of displaying the entire 'info_block' content? My ultimate goal is to locate the price within every 'info_block&apo ...