Anchor Tag behaving weird

Question

My anchor tag is not working, the ideal url is localhost/VShroff/home/about.php however the url changes to localhost/about.php and is not redirected either. I have been trying to crack my head over this since a long time now.

The following is the HTML :

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

Im using the following Jquery and CSS :

<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 : When I hover my mouse over the link, it shows the correct url (localhost/directories/about.php) However when I click on it nothing happens but the browser url changes to localhost/about.php ( The page is not redirected to localhost/about.php)

None of the tags are working. And nope I dont have any base href — Aaditya Damani, Jun 08 '16 at 12:16
So where is the rest of your Javascript code? Are you using external scripts? — Midas, Jun 08 '16 at 13:23

Tirthraj Barot · Answer 1 · 2016-06-08T12:30:00.017

0

I assume your directory structure as

htdocs or www (BASED ON YOUR SERVER)
|
|--Vshroff
      |--NEW
          |--home
             |
             |-index.php(HERE IS THE ANCHOR TAG)
             |-about.php

So I created same structure on my machine. Here are the files

index.php

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

about.php

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

It it works perfect.

edited Jun 08 '16 at 12:30

answered Jun 08 '16 at 12:04

Tirthraj Barot

2,671
2
17
33

tell us the directory structure where this HTML code is present. – Himanshu Jun 08 '16 at 12:11
Tried /about.php no luck. Directory : localhost/Vshroff/New/home/ – Aaditya Damani Jun 08 '16 at 12:15
@AadityaDamani There is no point giving full url in the anchor tag.. Alright.. Let me correct it again. – Tirthraj Barot Jun 08 '16 at 12:17
@AadityaDamani on what page is the current anchor tag written? – Tirthraj Barot Jun 08 '16 at 12:18
The directory is correct. Anchor tag is written in index.php in same directory – Aaditya Damani Jun 08 '16 at 12:22
I created the same directory structure and tested it.. It works only as about.php and not with / before it. – Tirthraj Barot Jun 08 '16 at 12:25
I think the problem is with the css file ive used, which is app.min.css – Aaditya Damani Jun 08 '16 at 12:37

score 0 · Answer 2 · answered Jun 08 '16 at 12:14

0

if you have this HTML in www directory then it will redirect to localhost/about.php . If its present inwww/shroff/home/ then it will redirect relatively to localhsot/shroff/home/about.php

answered Jun 08 '16 at 12:14

Himanshu

490
1
8
17

i guess the code you provided is in the same folder as the `about.php` . If that's the case then it should work correctly. – Himanshu Jun 08 '16 at 12:22
The code I provided is in the same folder, doesnt work yet – Aaditya Damani Jun 08 '16 at 12:27
did you use `url rewrite` or `routing` in some code? [.htaccess route with mod_rewrite](http://stackoverflow.com/questions/16388959/url-rewriting-with-php) – Himanshu Jun 08 '16 at 12:31

score 0 · Answer 3 · answered Jun 08 '16 at 12:20

0

Why not use a relative path like : "./about.php" if your about page is in the same folder as index... ?

answered Jun 08 '16 at 12:20

Julo0sS

2,096
5
28
52

did you try your page without your javascript code? (just comment it and try again) – Julo0sS Jun 08 '16 at 12:30
... Maybe clear your browser cache? and what about your html code? is it valid? did you check it? – Julo0sS Jun 08 '16 at 12:36

score 0 · Answer 4 · answered Jun 08 '16 at 12:22

0

Try this it may work....

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

answered Jun 08 '16 at 12:22

Mani

2,675
2
20
42

score 0 · Accepted Answer · answered Jun 15 '16 at 08:57

0

The JQuery file has beeb causing this error, couldn't refine and find out what was the problem, however on removing the jquery file it worked normally.

I think I can do without that file.

Thanks everyone.

answered Jun 15 '16 at 08:57

Aaditya Damani

355
1
2
12

Anchor Tag behaving weird

5 Answers5