jQuery Tabs Conundrum

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

SO .... I've looked a bit and can't seem to find the answer and maybe someone here knows the solution. I'm hoping that by the time I post this I'll figure it out, which seems to happen a lot.

Overview

I'm using the stock jQuery tabs with my scrolling tabs add on script this dose not have anything to do with the add on the default tabs are fine for this issue. Along with this I have a simple hash(jump links) check script. This script listens for the hash to change and then will process the hash to open up/focus on the corresponding tab. All of this is fine and dandy.

So this is the issue the default tabs in jQuery prevents the default click action from firing so clicking on many different tabs does not change the hash that the tab is linked to.

Dose anyone know how to disable event.preventDefault();
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK so I've come up with a solution that works and it is simple

the event.preventDefault(); stops the href from firing but not the onclick event

So I set the hash in the onclick event by doing something like this
HTML Code: [ Select ]
<li><a href="#{href}" onclick="location.hash = \'#{hash}\';">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
 
  1. <li><a href="#{href}" onclick="location.hash = \'#{hash}\';">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
  2.  


Note that the #{href}, #{hash}, and #{label} will be replace dynamically with the correct info

so it would look like this after being processed
HTML Code: [ Select ]
<li aria-selected="true" aria-labelledby="ui-id-17" aria-controls="tab-statistics" tabindex="0" role="tab" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active ui-state-focus"><a id="ui-id-17" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#tab-statistics" onclick="location.hash = '#statistics';">Statistics</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
 
  1. <li aria-selected="true" aria-labelledby="ui-id-17" aria-controls="tab-statistics" tabindex="0" role="tab" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active ui-state-focus"><a id="ui-id-17" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#tab-statistics" onclick="location.hash = '#statistics';">Statistics</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>
  2.  

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 122 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.