Preventing hash jump on easytabs

JavaScript
1

I’ve got some tabs that transition in and out by fading.

The functionality of the tabs goes as follows

User click on tab
The tab then expands down
The user can then tab through other tabs without panel closing (fade transition)
The user can also click on same tab to collapse the tab up

My issue is when the tab panel has been expanded, then closed, then a person clicks on another tab to re-expand it.

I’m using a hash anchor to match up the tabs tot he content and it jumps the div to the top of the page. How do I disable this jumping behavior when the user re-expands the tabs a second time?

Here is my code

<script type="text/javascript">
    jQuery(document).ready(function ($) {
      
        $('#tab-container').easytabs({
          collapsible: true, 
          collapsedByDefault: true,
			       });
        
        var $tabContainer = $('#tab-container'),
            $tabs = $tabContainer.data('easytabs').tabs,
            $tabPanels = $(".panel")
            totalSize = $tabPanels.length;
        
        
        
      });


    </script>


<div id="tab-container" class='tab-container'>
	
         
           <ul class='etabs'>

             <li class='tab'><a href="#tab1">About</a></li>
             <li class='tab'><a href="#tab2">Committees</a></li>
             <li class='tab'><a href="#tab3">Events</a></li>
             <li class='tab'><a href="#tab4">Grants &amp; Support</a></li>
              <li class='tab'><a href="#tab5">Knowledge Base</a></li>
              <li class='tab tabActive'><a href="#tab6">Blog</a></li>
             <li class='tab'><a href="#tab7">Forum</a></li>
             <li class='tab'><a href="#tab8">Submit</a></li>
           </ul>
     
 
     <div class='panel-container'>
      <div id="tab1" class="panel">
      	
        <div class="container_50">
          <h2>About</h2>
          <div class="panelContent">
            text
          </div>
        </div>
      </div>
      <div id="tab2" class="panel">
        <div class="container_50">
        <h2>Committees</h2>
        <p>
          text
        </p>
    	</div>
      </div>
      <div id="tab3" class="panel">
        <div class="container_50">
        <h2>Events</h2>
        <p>
          text
        </p>
    	</div>
      </div>
      <div id="tab4" class="panel">
      	<div class="container_50">
        <h2>Grants &amp; Support</h2>
        <p>
          text
        </p>
    </div>
      </div>
      <div id="tab5" class="panel">
      	<div class="container_50">
        <h2>Knowledge Base</h2>
        <p>
        text
        </p>
    </div>
      </div>
      <div id="tab6" class="panel">
      	<div class="container_50">
        <h2>Blog</h2>
        <p>
       text
        </p>
    </div>
      </div>
      <div id="tab7" class="panel">
      	<div class="container_50">
        <h2>Forum</h2>
        <p>
          text
        </p>
    </div>
      </div>
      <div id="tab8" class="panel">
      	<div class="container_50">
        <h2>Submit</h2>
        <p>
          text
        </p>
    </div>
      </div>

suggestions?

I’ve tried this already :

<script type=“text/javascript”>
/* <![CDATA[ /
( function( $ ) {
$( ‘a[href=“#”]’ ).click( function(e) {
e.preventDefault();
} );
} )( jQuery );
/ ]]> */
</script>

2

href=“#” is an instruction to jump to the top of the page. If you don’t want that behaviour then get rid of the href.

3

What other alternatives are there?

4

Perhaps put a rel attribute on the <a> tag in place of the href and use that instead to locate the tags that the code is to apply to.

5

I’ve been waiting for this day for 8 years. I know something felgall didn’t know. Lol. You need the href and something in it for a few browsers for it to work - depending. So you do this to keep it from jumping…

<a href="javascript:;"></a>

http://www.websitecodetutorials.com/code/helpful-tips/buttons-with-no-url.php

6

NEver ever place a JavaScript label inside the href like that. Anyone even suggesting such a thing should never be providing advice on JavaScript as they obviously know nothing whatever about JavaScript since learning not to do that is one of the first things any decent beginners JavaScript class would teach.

If you need the href to be there then you need to disable the default action when JavaScript is enabled and leave the href pointing to the web page you want people to get to if they click the link and don’t have JavaScript enabled.

Where the href is needed is where you have it pointing to an actual web page. The href=“#” is only ever used in example code where the # is supposed to be replaced by the address of the page for hen javaScript is not available. When you do;'t have an actiaual page to link to in that situation then all resonably modern browsers such as Netscape 4 do not require the href attribute to be there at all.

Since the OP hadn’t replaced the # with an actual page for the link to work with for those without JavaScript the href is completely unnecessary for their purpose. Only if they changed it to provide a working destination for those without JavaScript would a different solution be required.

7

Ha you didn’t take that personal did you. It does prevent it from jumping. And because he asked he did need it. Why is that a problem in your minds eye anyway?

8

Looking again at the original code I have now realised that the href=“#…” are needed as they are where you want things to jump to if JavaScript is disabled.

So what must be happening is that the following code is not matching to the tags that you expect:

$( 'a[href="#"]' ).click( function(e) {
e.preventDefault();
} );

perhaps because none of the hrefs have just a # in them.

They all start with a # so the following should work:

$( 'a[href^="#"]' ).click( function(e) {
e.preventDefault();
} );

note the extra ^ in front of the = to indicate starts with rather than exactly equal to.

9

I’ve tried adding this to my script, but I think I’m implementing it wrong, just putting it in the document ready function doesn’t seem to do it… pardon my asking for so much help, I really do appreciate it.

Whereabouts in here would I add the recommended snippet?

<script type="text/javascript">
    jQuery(document).ready(function ($) {
      
        $('#tab-container').easytabs({
          collapsible: true, 
          collapsedByDefault: true
			       });
        
        var $tabContainer = $('#tab-container'),
            $tabs = $tabContainer.data('easytabs').tabs,
            $tabPanels = $(".panel")
            totalSize = $tabPanels.length;
      });
</script>
10

Ahh my bad. I should of looked closer. Much closer lol. You have #tabs1 ect in the href. Obviously you can’t put anything else in there. The solution I showed was only for when you need the href but if you use # it goes to the top. In that case you can use what I showed.