CODEWITHSUNDEEP
javascripthtml
Robert
Robert

Reputation: 1726

Can't get tabs to work in HTML & JavaScript

I'm not a JavaScript person so I'm having a little difficulty with what I'm trying to do. We have a html page that is supposed to display "tabs" for 3 different details of our product: Description, Details, and Returns. I can get the tabs to display correctly but the JavaScript isn't changing to the tab when I click on the tab header.

enter image description here

Here's my html, pretty basic:

<html>
<head>
    <link rel="stylesheet" href="skeleton.css">
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <br><br><br>
    <ul class="sans tabs"> 
        <li>
            <a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a>
        </li>
        <li>
            <a href="#tabdetails" style="fonrt-weight:normal;color:#999">Details</a>
        </li>
        <li>
            <a href="#returns" style="fonrt-weight:normal;color:#999">Delivery & Returns</a>
        </li>
    </ul>
    <ul class="tabs-content"> 
        <li class="active" id="tabinfo">
            <p>A description of the product would go here.  A description of the product would go here.  A description of the product would go here.  
            A description of the product would go here.  A description of the product would go here.  A description of the product would go here.  A description of the product would go here.</p>
        </li>
        <li id="tabdetails">
            <ul>
                <li>Detail #1</li>
                <li>Detail #2</li>
                <li>Detail #3</li>
                <li>Detail #4</li>
                <li>Detail #5</li>
                <li>etc.</li>
            </ul>
        </li>
        <li id="returns">
            <p>Details about returning a product would go here.</p>
            <p>Details about returning a product would go here.</p>
            <p>See <a href="/somelink/">Delivery & Returns</a> for more information.</p>
        </li> 
    </ul>
    <script src="tabs.js"></script>
</body>
</html>

and of course, the tabs.js file:

$('body').on('click', 'ul.tabs > li > a', function(e) {

    //Get Location of tab's content
    var contentLocation = $(this).attr('href');

    //Let go if not a hashed one
    if(contentLocation.charAt(0)=="#") {

        e.preventDefault();

        //Make Tab Active
        $(this).parent().siblings().children('a').removeClass('active');
        $(this).addClass('active');

        //Show Tab Content & add active class
        $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

    }
});

Again, I don't know a whole lot about js so I'm sure it's something to do with that but right now I'm stuck and can't figure it out.

Upvotes: 0

Views: 435

Answers (3)

DannyTheDev
DannyTheDev

Reputation: 4173

You need to wrap your statement in a ready statement.. i.e

$(document).ready(function(e) {

    $('body').on('click', 'ul.tabs > li > a', function(e) {

        //Get Location of tab's content
        var contentLocation = $(this).attr('href');

        //Let go if not a hashed one
        if(contentLocation.charAt(0)=="#") {

            e.preventDefault();

            //Make Tab Active
            $(this).parent().siblings().children('a').removeClass('active');
            $(this).addClass('active');

            //Show Tab Content & add active class
            $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

        }
    });

});

This could be neatened up as well:

$('body').on('click', 'ul.tabs > li > a', function(e) {

could become

$('.tabs').on('click', 'a', function(e) {

Upvotes: 1

PowerPanda
PowerPanda

Reputation: 759

You need to add the Click handler on the Tab headers, instead of on the body

$("body ul.tabs li").click(function() {
  // the function goes here.
});

This is assuming that you're using jQuery. If you're not already using it, you should add this under the head section.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

Upvotes: 0

Andrew
Andrew

Reputation: 1880

Try using this jquery ui tabs. you will find all the code you need and an explanation on how to apply it in the link provided

Upvotes: 0

Related Questions