SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question .js tabbed menu links not working correctly

    Hoping someone can help me with this please.
    Having a strange problem with tabbed content not loading correctly unless I refresh the page.

    I have a main navigation menu for the site which has some links which load a specific tab when they are clicked, that part works fine.
    On the page with the tabbed section (services page) I also have the tabbed menu which loads the correct tabs when its supposed to.

    The problem is when you are on the services page, if you click the links to the tabbed section from the main site navigation it does not work unless I reload the page for the browser after I've clicked the link.


    Here's the .js which I'm using to make the tabbed section work.

    Code:
    <script type="text/javascript">
                                $(function () {
        $(".tab_content").hide().first().show();
        $(".tab_widget li:first").addClass("active");
    
        $(".tab_widget a").on('click', function (e) {
            e.preventDefault();
            $(this).closest('li').addClass("active").siblings().removeClass("active");
            $($(this).attr('href')).show().siblings('.tab_content').hide();
        });
    
        var hash = $.trim( window.location.hash );
    
        if (hash) $('.tab_widget a[href$="'+hash+'"]').trigger('click');
    	
    
    });
                            </script>
    Can anyone tell me how I can amend this to make it work from the main menu clicks even if the user is on the tabbed page?

    Any help as always very much appreciated.

    Thanks

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi sketchgal,

    Is it possible for you to link to somewhere that we can see the code and try it out? It's difficult to debug without being able to recreate the problem.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a link to the page where you can see the problem with the drop down menu at the top not working correctly but the tabbed side nav works.
    Any help greatly appreciated with this.

    http://www.fennultdesign.co.uk/Mak-Marine/Services/

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Add this JS to your Services page:

    Code JavaScript:
    $("ul.sub-menuitem a").on('click', function (e) {
        e.preventDefault();
        $('.tab_widget a[href$="'+this.hash+'"]').trigger('click');
    });

    The selector I've used here would obviously cause you problems if you add another dropdown menu to the site that uses the .sub-menuitem class, so you might want to add a unique id to the services menu to select on.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for the help with this fretburner.

    I've put the code in below the code I already had on the page but it's not working for some reason.

    Heres the link to the page now, any ideas what else I need to change on it?

    http://www.....

  6. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much fretburner, your code works brilliantly!
    I'd put it in the wrong place!

    Moved it to within the function and it workd great!

    Thanks again!


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
  •