jQuery tabs with anchored links on the page
Hello.
I have an FAQs page, dsp_FAQ.cfm, that has some list of hyperlinked questions and anchored answers. When I clicked one of the questions, the page shows the anchored answer to the top and the FAQs tab stays active. The problem was, when I refresh the page (hit F5 key), the active tab which was supposedly the FAQs did not stay active and then the Home tab became the active tab instead.
Also, I have to click the tab twice before jQuery run the onClick event script. Single click doesn't work.
Below are my sample pages. Btw, I am using Coldfusion and Fusebox3 methodology if that helps.
dsp_layout.cfm
<script>
$(document).ready(function() {
$('ul#tabslist li a').click(function() {
var xfa = $(this).attr('name');
switch(xfa)
{
case 'main.home':
var activetab = 'tabs-1';
break;
case 'main.register':
var activetab = 'tabs-2';
break;
case 'main.faq':
var activetab = 'tabs-3';
break;
}
//redirect here
window.location = "index.cfm?fuseaction="+xfa+"#"+activetab;
});
});
</script>
<div id="tabs">
<ul id="tabslist">
<li class="tabmain"><a href="#tabs-1" name="main.home">Home</a></li>
<li class="tabmain"><a href="#tabs-2" name="main.register">Register</a></li>
<li class="tabmain"><a href="#tabs-3" name="main.faq">FAQs</a></li>
</ul>
<div id="fblayout">
<cfoutput>#fusebox.layout#</cfoutput>
</div>
</div>
dsp_FAQ.cfm
<h3>FAQs</h3>
<cfoutput>
<ul>
<li ><a href="#self#?fuseaction=main.faq##q1">Question1</a></li>
<li><a href="#self#?fuseaction=main.faq##q2">Question2</a></li>
<li><a href="#self#?fuseaction=main.faq##q3">Question3</a></li>
</ul>
</cfoutput>
<a name="q1"><h3>Question1</h3></a>
<p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p>
<a name="q2"><h3>Question2</h3></a>
<p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p>
<a name="q3"><h3>Question3</h3></a>
<p>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </p>