Switch visible div based on user click

Question

so I have a div with navigational links (set up using ul/li and a href within the li's).

Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's

I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...

JSFIDDLE

Please see the above jsfiddle for the HTML/CSS/JS involved.

HTML:

<div id="content">
        <div class="man-banner"></div>
        <div class="banner-nav" id="tabs">
            <ul class="tabs" style="padding-left: 0px">
                <li class="active"><a href="#wrapper#container#content#tab-content#home"><span>Home</span></a></li>
                <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a href="#support" rel="support"><span>Support</span></a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="home" class="tab_content">
            1234156124
            </div>
            <div id="findvehicle" class="tab_content">
            abasdjfniasjfnasdf
            </div>
            <div id="downloads" class="tab_content">
            asdfniadhnfiasdn890384834854854jnrjrjr
            </div>
            <div id="support" class="tab_content">
            asdfniadhTHIS IS SUPPORT
            </div>
        </div>
    </div>

Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)

Thanks again for your help!

Answer 1

This is one way of achieving it.

HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:

    <div id="content">
        <div class="banner-nav" id="tabs">
            <ul class="tabs" style="padding-left: 0px">
                <li><a href="#home"><span>Home</span></a></li>
                <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="home" class="tab_content">
            1234156124
            </div>
            <div id="findvehicle" class="tab_content">
            abasdjfniasjfnasdf
            </div>
            <div id="downloads" class="tab_content">
            asdfniadhnfiasdn890384834854854jnrjrjr
            </div>
            <div id="support" class="tab_content">
            asdfniadhTHIS IS SUPPORT
            </div>
        </div>
    </div>

JavaScript - see inline comments:

$(document).ready(function(){
  // start of at the home page
  navigateTo("#home");

  // for every navlink element
  $('.tabs > li > a').each(function() {
    //when it is clicked
    $(this).click(function(e) {
      e.preventDefault();
      // navigate to the section ilinked to in the href
      navigateTo($(this).attr('href'));
    });
  });
});

function navigateTo(sectionId) {
  //hide all tabs
  $('.tab_content').hide();

  //then show the one we want
  $(sectionId).show();
}