SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Opening JQuery Tab With Link on Same Page

    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:

    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. #2
    SitePoint Enthusiast gilmeragency's Avatar
    Join Date
    Oct 2012
    Location
    Palm Springs, CA
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just figured it out. I have to use the following:

    Code:
    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •