Question

Issue is only with Safari: I have three tabs that each show a div id while hiding the other two. If I click tab2 then tab3 then tab1 it shows/hides the proper divs without the screen scrolling up, however when I then click either tab2 or tab3 from tab 1 it moves the screen up to the top of the referenced div. Can anyone think of why this may be the case and how to solve it? I would like the divs to show/hide without the screen scrolling up after clicking the tab. Thanks!

Here is the HTML Code:

`

<a onClick="remove_visibility('tabs2'), remove_visibility('tabs3'), toggle_visibility('tabs1')">Tab 1</a> 


<a onClick="remove_visibility('tabs1'), remove_visibility('tabs3'), toggle_visibility('tabs2')" class="selected">Tab 2</a> 


<a onClick="remove_visibility('tabs1'), remove_visibility('tabs2'), toggle_visibility('tabs3')">Tab 3</a>

`

Here is the relevant jQuery code:

 <script type="text/javascript">
toggle_visibility = function (id) {
    var e = $("#"+id);
    e.show();
}
remove_visibility = function (id) {
    var e = $("#"+id);
    e.hide();
}


</script>

Answer 1

I would not use onclick with JQuery calls I would attach them via their anchor id, class or by type or some other way. Try also in those functtions returning a false after you show and hide may be that will do the trick, cause Im thinking its trying to navigate some where because you clicked an empty anchor.

Update:

I have some code that does it and the html is at the bottom of the page with scroll position of the browser being at the bottom and wont navigate up:

JQuery (This is a quick mock-up based on my HTML, to give as demo, customise it to your needs and how you would grab items and how):

<script type="text/javascript">
    $(document).ready(function() {
        $(".divClass a").each(function(i) {
            if ($(this).text() != 'Tab 2') {
                $(this).next().hide();
            }
            $(this).click(function() {
                $(".divClass a").each(function(i) {
                    $(this).next().hide();
                });
                $(this).next().show();
                return false;
            });
        });
    });
</script>

HTML (again some thing quickly put together for a demo):

<div class="divClass">
    <a href="JavaScript:void();">Tab 1</a>
        <div id="Tab1">
            I am Tab 1 
        </div>
    <a href="JavaScript:void();">Tab 2</a>
        <div id="Tab2">
            I am Tab 2 
        </div>
    <a href="JavaScript:void();">Tab 3</a>
    <div id="Tab3">
            I am Tab 3 
        </div>
</div>