Trying So Hard To Link To Tabbed Content From An External Link

Terribly frustrated and embarrassed that I can't figure this out. Client wants a sitemap at the bottom of the website that takes the user to any page and any tab within that page w

Solution 1:

A demo that uses jquery.tools for the tabs

As far as i understood your question this should match your problem:

• Tab B-1
• Tab B-3

The solution with your code to your original question

• How to Link to tabbed content from an external link?
• solved

Please take a look at the solution (#During, #After)

if (window.location.hash) {
        var wndHash = window.location.hash;
        var tab = wndHash + "Tab";
        // if hash exist on doc ready then remove class "active" from all tabs        
        $("#tabs li").removeClass('active');
        // show the tab content and make tab list item (li) active
        $(wndHash).fadeIn();            
        $(tab).parent().addClass("active");
        console.log(wndHash, $(wndHash), tab, $(tab));
    } else {
        // if no hash make the BeforeTab active
        $("#Before").fadeIn();            
        $("#BeforeTab").parent().addClass("active");
    }

Excursion using CSS3 selectors

Based on Naman Goel suggestion (see in this thread) i have set up a basic css3 target selector demo:

<h2>Table of contents</h2><ul><li><ahref="#intro">intro</a><li><ahref="#end">the end</a></ul><h2><aname="intro">CSS3 selectors and the :target pseudo class</a></h2><h2><aname="end">Look at me - i am the END-Anchor</a></h2>

And this css

h2 {font-size: 24px; font-weight: heavy; padding: 1em;}
*:target { color: red; font-size: 32px; }

Are the basic setup to change the css of the h2 heading if the url contains the corresponding anchor (either #intro or #end)

How to change content of a tab with internal (anchor) links?

In your major update you write: "If I am on the page the URL updates when I click on the link within the page but it does not change the content"

In your page all tabs (tab Email) are working fine and are loading their corresponding content. So i assume that you are talking about the links in the footer of the page crazy.html:

<divclass="BottomInfo"id="A234"><divclass="Links3"><ahref="Contact.php">Contact</a><ulid="Nottabs"><liclass="Lactive">foo</li><li><divclass="LinkText"id="LinksTT2"><aclass="icon_accept"href="#Email">Email Us</a></div></li></ul><!---Ends ul id "Nottabs--></div></div>

If you click on this link the content is not updated since you do not have an event handler attached for the links in the footer.

No Event handler for links at footer

With chrome devtools you can see that there are no event handlers attached to the links in the footer.

.

In your javascript you add a click event for every DOM Node that matches this selector$("#tabs li"). In your footer (BottomInfo) the list item does not match the same selector like the one in your tabs. Therefore nothing happens when you click on the links in the footer. If you add an event handler for the list items $("#Nottabs li").click(... and put the same code as in your tabs it should work.

$("#Nottabs li").click(function () {
   // similar to your tab solution // you have to attach a click-event handler // to the list item in your BottomInfo 
}

Fully working demo with javascript and css 2

Please take a look at the fully working demo with your code as a starting point.

Please let me know if this solves your problem

Minor update

I found a demo for tabs using css3. This is quite impressive.

Solution 2:

I have a MUCH simpler solution for you. use the CSS3 property of :target for your tabbed interface. Everything will just start working for you that way.

Also, you can use selectivizr to polyfill it for older browsers.

basically you define different divs with the tabbed content. and set it to display:none And div:target { display:block; }

and the tab buttons can be simple links to #idnameofDiv

It's really quite easy. It should be perfect for you, PLUS NO javascript.