Hyperlinks pointing to anchors cause page refresh
Hey guys,
Here's my dilemma. I have run into this issue in the past, first noticing it when I created an FAQ page with a table of contents with bookmark links to named anchor divs further down the page. I noticed that if I don't include the current page name in front of each "#anchor-name" then Fuel thinks I'm trying to load the url:
http://sitename.com/#anchor-name. Here is an example:
<ul>
<li><a href="faq#question1">Question 1?</a></li>
<li><a href="faq#question2">Question 2?</a></li>
</ul>
<a name="question1">Question 1 Answer</a>
<a name="question2">Question 2 Answer</a>
The code above works fine, but originally I had it like this:
<ul>
<li><a href="#question1">Question 1?</a></li>
<li><a href="#question2">Question 2?</a></li>
</ul>
<a name="question1">Question 1 Answer</a>
<a name="question2">Question 2 Answer</a>
If you try that above code and click either of those Question links, Fuel will think you're trying to load the url /#question1, which is obviously not correct and not the desired behavior.
Now, to my current issue. I'm noticing this problem getting in the way when implementing a Foundation Tab setup. Here is the code:
<dl class="tabs">
<dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
<dd><a href="#simple2">Simple Tab 2</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">
This is simple tab 1s content.
</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
</ul>
Here is where I got the code from:
http://foundation.zurb.com/docs/tabs.php. You obviously need to include the appropriate Foundation assets in the correct order to get this working, but I think it basically relies on the jQuery tab system to do this. If I switch the above to the below, it technically works, but the page reloads, which shouldn't happen with these javascript click events.
<dl class="tabs">
<dd class="active"><a href="pagename#simple1">Simple Tab 1</a></dd>
<dd><a href="pagename#simple2">Simple Tab 2</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">
This is simple tab 1s content.
</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
</ul>
Is this an issue that can be fixed with a setting tweak in Fuel, or is it only a javascript problem? I noticed that on the foundation tab page referenced above, if you click any of the sample tabs, you get this in the URL:
http://foundation.zurb.com/docs/tabs.php#simple2
And, if you inspect the code they have, it doesn't require having the URL slug in front of the anchor link.
Thanks,
Erik
Comments
You don't happen to have a base tag set? http://www.w3schools.com/tags/tag_base.asp
<base href="<?=site_url()?>" />
Is this not the correct way to do it?
<base href="<?=site_url()?>" />
line absolutely got these anchor links to show up properly. Thanks for that tip!