Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    I have implemented a Jquery tab. It works, but i was wanting to target it from another page with a link. Whats the best way to write the code to target it?? Example: I want to hit tab3 from the home page. Would it be <a href="thispage#tab3"></a>??

    jquery:
    <script type="text/javascript">
    jQuery(document).ready(function($){

    /* Function for tab with frame */
    jQuery(".tab-content").hide(); //Hide all content
    jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
    jQuery(".tab-content:first").show(); //Show first tab content
    //On Click Event
    jQuery("ul.tabs li").click(function() {
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery(".tab-content").hide(); //Hide all tab content
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    jQuery(activeTab).fadeIn(1000); //Fade in the active content
    return false;
    });

    });
    </script>

    HTML code:
    <div id="content">
    <h2>jQuery arrow tabs</h2>
    <div class="tabcontainer-arrow">
    <ul class="tabs-arrow">
    <li><a href="#tab_1">Tab1</a></li>
    <li><a href="#tab_2">Tab2</a></li>
    <li><a href="#tab_3">Tab3</a></li>
    </ul>
    <div id="tab-body-content">
    <div id="tab_1" class="tab-content-arrow">

    </div>
    <div class="one_third">

    </div>
    <div class="one_third last">

    </div>
    <div class="clear"></div>
    </div><!-- end of #tab_1 -->
    <div id="tab_2" class="tab-content-arrow">

    </div><!-- end of #tab_2 -->
    <div id="tab_3" class="tab-content-arrow">

    <ul>

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Cras vitae ipsum eget mauris commodo viverra.</li>
    <li>Donec sed nisl justo, ut scelerisque lacus.</li>
    <li>Donec rhoncus mauris dapibus ante porta at ornare magna tincidunt.</li>

    <li>Nam at ligula enim, vel commodo arcu.</li>
    <li>Mauris tristique arcu at magna consequat fringilla.</li>

    <li>Etiam eget dui a neque condimentum sodales a sed massa.</li>
    </ul>
    </div><!-- end of #tab_3 -->
    </div><!-- end #tab-body-content -->
    </div><!-- end #tabcontainer-arrow -->
    <br /><br />
    <h2>jQuery framed tabs</h2>
    <div class="tabcontainer">
    <ul class="tabs">
    <li><a href="#tab1">Tab1</a></li>
    <li><a href="#tab2">Tab2</a></li>
    <li><a href="#tab3">Tab3</a></li>
    </ul>
    <div id="tab-body">
    <div id="tab1" class="tab-content">
    <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor placerat mi. Aliquam malesuada, felis eget auctor euismod, lacus tellus vulputate turpis.</h4>
    <div class="one_third">
    <p><strong>Sed porttitor placerat mi. Aliquam malesuada</strong><br />Nulla facilisi. Etiam vel nunc ut eros posuere sollicitudin. </p>
    <p>Etiam lacus nulla, molestie ac ultrices eu, interdum in nulla. Quisque felis turpis, malesuada eu fermentum eget, molestie in massa. Vestibulum non sapien nisl, non varius quam. </p>
    </div>
    <div class="one_third">
    <p><strong>Aliquam malesuada, felis eget auctor euismod, lacus tellus vulputate turpis</strong><br />Fusce a leo vel arcu pretium euismod a eu ipsum. Nulla facilisi. Etiam vel nunc ut eros posuere sollicitudin. </p>
    <p>Etiam lacus nulla, molestie ac ultrices eu, interdum in nulla. Quisque felis turpis, malesuada eu fermentum eget, molestie in massa. Vestibulum non sapien nisl, non varius quam. </p>
    </div>
    <div class="one_third last">
    <p><strong>Sonsectetur adipiscing elit. Sed porttitor placerat mi. Aliquam malesuada, felis </strong><br />Etiam vel nunc ut eros posuere sollicitudin. </p>
    <p>Etiam lacus nulla, molestie ac ultrices eu, interdum in nulla. Quisque felis turpis, malesuada eu fermentum eget, molestie in massa. Fusce laoreet, dui placerat euismod sagittis, nulla elit commodo libero, eu mattis mi est a massa. Vestibulum non sapien nisl, non varius quam. </p>
    </div>
    <div class="clear"></div>
    </div><!-- end of #tab1 -->
    <div id="tab2" class="tab-content">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Morbi nec magna erat, id tincidunt sapien. Morbi id porttitor lorem. In mi velit, viverra a congue et, congue sit amet nibh. Pellentesque a libero eget quam consequat condimentum eu eu est. Vestibulum at tellus eget massa accumsan volutpat. Suspendisse felis arcu, sagittis nec ultrices sit amet, faucibus a ante. Nunc et ante at ipsum iaculis porta eu quis augue. Praesent ultrices suscipit quam, vitae malesuada erat volutpat non. Sed ut tortor turpis, eu dignissim elit. </p>
    </div><!-- end of #tab2 -->
    <div id="tab3" class="tab-content">

    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Morbi nec magna erat, id tincidunt sapien. Morbi id porttitor lorem. In mi velit, viverra a congue et, congue sit amet nibh. Pellentesque a libero eget quam consequat condimentum eu eu est. Vestibulum at tellus eget massa accumsan volutpat. Suspendisse felis arcu, sagittis nec ultrices sit amet, faucibus a ante. Nunc et ante at ipsum iaculis porta eu quis augue. Praesent ultrices suscipit quam, vitae malesuada erat volutpat non. Sed ut tortor turpis, eu dignissim elit. </p>
    <ul>

    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Cras vitae ipsum eget mauris commodo viverra.</li>
    <li>Donec sed nisl justo, ut scelerisque lacus.</li>
    <li>Donec rhoncus mauris dapibus ante porta at ornare magna tincidunt.</li>

    <li>Nam at ligula enim, vel commodo arcu.</li>
    <li>Mauris tristique arcu at magna consequat fringilla.</li>

    <li>Etiam eget dui a neque condimentum sodales a sed massa.</li>
    </ul>
    </div><!-- end of #tab3 -->
    </div><!-- end #tab-body -->
    </div><!-- end #tabcontainer -->
    </div><!-- end #content -->


  2.  

  3. #2
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    no ideas?


  4. #3
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I'm just not very clear on what the question is - does the tab represent a different page or just an anchor placement on the same page?
    If it's on a different page, then I think using something like:
    <div id="whatever" onclick="window.location = 'tab3.html'">

    That's all I can think of, and it's not correct code, but it might be a starting point.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #4
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    if i am on the homepage, and in my navigation i have a button called "About" which activates a drop down with a list of items, one of which says "FAQS". I want to be able to target that exact link. If i go the the about page, and am using a tab jquery setup, with one of the tab'd choices being FAQs, can i still target that link from another page?



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com