Opening JQuery Tab With Link on Same Page

JavaScript
1

Hi Everyone,

I want to open my tabs with the links in the navigation area, as well as the clickable tabs. It works, but the thing makes the page jump. Is there a way to stop that? I tried using a click handler in the href, but that didn’t work, so I removed it (maybe I did it wrong though). Also, I know there is a more elegant and efficient way to implement what I have already done. Would a switch case work good here? And the code just doesn’t work unless the scripts come after the links. So, maybe if I put the script after the ul element would it work? Here is my code:


<nav id="navigation">
<ul>
<li><a href="#" id="gototab1">Home</a></li>
<script>
    $("#gototab1").click(function() {
        $("#tabs").tabs("select","#tab1");
    });
</script>
<li><a href="#" id="gototab2">About</a></li>
<script>
$("#gototab2").click(function() {
        $("#tabs").tabs("select","#tab2");
    });
</script>
<li><a href="#" id="gototab3">Pastor</a></li>
<script>
$("#gototab3").click(function() {
        $("#tabs").tabs("select","#tab3");
    });
</script>
<li><a href="#" id="gototab4">Ministries</a></li>
<script>
$("#gototab4").click(function() {
        $("#tabs").tabs("select","#tab4");
    });
</script>
<li><a href="#" id="gototab5">Prayer</a></li>
<script>
$("#gototab5").click(function() {
        $("#tabs").tabs("select","#tab5");
    });
</script>
<li><a href="#" id="gototab6">Giving</a></li>
<script>
$("#gototab6").click(function() {
        $("#tabs").tabs("select","#tab6");
    });
</script>
<li><a href="#" id="gototab7">Store</a></li>
<script>
$("#gototab7").click(function() {
        $("#tabs").tabs("select","#tab7");
    });
</script>
<li><a href="#" id="gototab8">Calendar</a></li>
<script>
$("#gototab8").click(function() {
        $("#tabs").tabs("select","#tab8");
    });
</script>
<li><a href="#" id="gototab9">Gallery</a></li>
<script>
$("#gototab9").click(function() {
        $("#tabs").tabs("select","#tab9");
    });
</script>
<li><a href="#" id="gototab10">Contact</a></li>
<script>
$("#gototab10").click(function() {
        $("#tabs").tabs("select","#tab10");
    });
</script>
</ul>
</nav>

Thanks so much!!!

G

2

I just figured it out. I have to use the following:


<li><a href="#" id="gototab1">Home</a></li>
<script>
    $("#gototab1").click(function(event) {
        $("#tabs").tabs("select","#tab1");
        event.preventDefault();
    });
</script>

But still want to work out the “switch case” and then see if it will all work once I put it after the <ul> element. Any ideas?

Thanks!

G