Using "javascript:void(0);" onClick=

programming web dev
1

I am currently using <a class=“toggle” href="#one"> etc to show & hide <li>s

The page scrolls downward for each “tab” click. I was told I could do away with the jumpiness by using “javascript:void(0);” but I cannot figure out what to do with “#one”

I used this demo called jQuery Hide Alll Except One (like tabs)

http://enure.net/dev/hide-all-except-one/

The function is

jQuery.noConflict();
jQuery(document).ready(function() {
    var hash = window.location.hash;
    
    (!hash) ?  
        hideAllExcept('#' + jQuery('#toggleThis > div:first').attr('id')) 
            : hideAllExcept(window.location.hash);

    jQuery('a.toggle').click(function() {
        var href = jQuery(this).attr('href');
        hideAllExcept(href);
    });
});

function hideAllExcept(el) {
    jQuery('#toggleThis div').addClass('hide');
    jQuery(el).removeClass('hide');

    jQuery('a.toggle').removeClass('active');
    jQuery('a[href="' + el + '"]').addClass('active');
    
}
2

Return false from the click event rather than a void from the href (it’s the same thing) that will prevent the jumpiness this and leaves the href within your link intact, i.e


    jQuery('a.toggle').click(function() {
        var href = jQuery(this).attr('href');
        hideAllExcept(href);
        **[COLOR=Red]return false;[/COLOR]**
    });



<a class="toggle" href="#one">link</a>
3

Thank you! I think I should let the creator of this jQuery demo know.

http://enure.net/dev/hide-all-except-one/

In the real world of pages with multiple scripts there were 2 problems. The hidden <li>s show stacked below before snapping into place and the HREF advancing the scrollbars onClick.