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