Deedub Deedub - 3 months ago 8
jQuery Question

is it possible to get the Numeric index of url hash?

so I have some code that works but I know it's not the right way to do it. I know there has to be an easier way.

I have links that are as follows

<a href="#1">&nbsp;<strong class="active">1</strong></a>
<a href="#2">&nbsp;<strong class="active">2</strong></a>
<a href="#3">&nbsp;<strong class="active">3</strong></a>
<a href="#4">&nbsp;<strong class="active">4</strong></a>


each of those links activate tab content which works great so no problem there.

I need to be able to give people a link directly to say tab content 3. so I figured that I could use window.location.hash
so I did the following.

if ( window.location.hash ==="#1") {
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(0).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(0).addClass('active');
}
else if( window.location.hash ==="#2"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(1).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(1).addClass('active');
}

else if( window.location.hash ==="#3"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(2).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(2).addClass('active');
}
else if( window.location.hash ==="#4"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(3).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(3).addClass('active');
}
else if( window.location.hash ==="#5"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(4).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(4).addClass('active');
}
else if( window.location.hash ==="#6"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(5).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(5).addClass('active');
}
else if( window.location.hash ==="#7"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(6).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(6).addClass('active');
}
else if( window.location.hash ==="#8"){
jQuery(".slides").find('.dslc-modules-area').addClass('hide');
jQuery(".slides").find('.dslc-modules-area').eq(7).addClass('show').removeClass('hide');
jQuery( ".slidelinks li strong" ).removeClass('active');
jQuery( ".slidelinks li strong" ).eq(7).addClass('active');
}


This works EXACTLY as it needs but it just seems too cumbersome.

is there a way to grab the index() of a hash? so say if it is #2, or #3 just use the index then I can use eq("whatever the index is").
I know what needs to happen just not sure what the syntax is.. I was also thinking I could grab the value of the hash and turn it into a numeric value, so if #2
an again I can use that in eq()

Answer

Replace all your code with:

jQuery(function( $ ){ // DOM ready and $ alias secured

   // other DOM ready code here.........


   // Now, the 3 lines I promised earlier:
   var idx = window.location.hash.replace(/\D/g,'') - 1;
   $(".slides").find('.dslc-modules-area').addClass('hide').eq(idx).removeClass('hide');
   $(".slidelinks li strong").removeClass('active').eq(idx).addClass('active');



});

Also, you logic is quite odd. You don't need two classes .hide and .show. Only one. Think about it.

To recap, to get the index 0..n you can use window.location.hash.replace(/\D/g,'') - 1; where /\D/g is a regex that replaces globally all \D non-digit characters occurrences with '' (so it removes them). So "#1" becomes "1"-1 which is index 0;

Comments