While this may seem like a simple question to some, my programming skills are not quite up to par.
I am seeking help from someone who can assist me.
My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to tab 4 without tabs 2 and 3 appearing in between.
Here is the script I am currently using:
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).mouseover(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").mouseover();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
I came across a similar query and solution on another stackoverflow post, but I'm struggling to adapt it to work for my situation.
You can view a demo of the vertical tabs here: http://jsfiddle.net/JAG72/tt7CK/6/
Thank you in advance for any assistance provided.