Brad Collyer Brad Collyer - 10 days ago 4
CSS Question

Switch visible div based on user click

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

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 class="active"><a class="navlink" data-section="home" href="#wrapper#container#content#tab-content#home"><span>Home</span></a></li>
                <li><a class="navlink" data-section="findvehicle" href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a class="navlink" data-section="downloads" href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a class="navlink" 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
  $('.navlink').each(function() {
    //when it is clicked
    $(this).click(function() {
      // navigate to the section identified in its data-section attribute
      navigateTo($(this).data('section'));
    });
  });
});

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

  //then show the one we want
  $('#' + sectionName).show();
}
Comments