CODEWITHSUNDEEP
javascriptjqueryhtml
user2250423
user2250423

Reputation: 201

How would i make the content of these tabs fade in when the tab is clicked?

i have been trying to get the content of these tabs to fade in when selected with no luck

here is the tabs 

<div id="homepagetabsdiv"><ul id="homepagetabs"><li id="tab0" onclick="javascript:show_tab('0');">Main</li>
<li id="tab1" title="Drag and drop this tab to re-arrange the order" onclick="javascript:show_tab('1');">managers</li>
<li id="tab2" title="Drag and drop this tab to re-arrange the order" onclick="javascript:show_tab('2');">Standings</li>
</ul></div>
<div id="tabcontent0" class="homepagetabcontent">CONTENT</div>
<div id="tabcontent1" class="homepagetabcontent">CONTENT</div>
<div id="tabcontent2" class="homepagetabcontent">CONTENT</div>

edited to add the showtab function 

function show_tab (tab_id) {
   var done = false;
   var counter = 0;
   while (! done) {
      var this_tab_content = document.getElementById("tabcontent" + counter);
      var this_tab = document.getElementById("tab" + counter);
      if (! this_tab_content) {
         done = true;
      } else {
         if (counter == tab_id) {
            this_tab_content.style.display = '';
            this_tab.className = "currenttab";
         } else {
            this_tab_content.style.display = 'none';
            this_tab.className = "";
         }
      }
      counter++;
   }
   location.hash = tab_id;
}

Upvotes: 1

Views: 815

Answers (1)

Ian
Ian

Reputation: 50903

Not sure what your show_tab function does, but it might need to look like this:

function show_tab(tab_num) {
    $(".homepagetabcontent").fadeOut(400, function () {
        $("#tabcontent" + tab_num).fadeIn(400);
    });
}

Also, it's probably easier to bind events unobtrusively instead of in the HTML. So instead of all your onclick="javascript:show_tab('1');" stuff, you could use this HTML format:

<li id="tab1" title="Drag and drop this tab to re-arrange the order" data-tab-num="1">managers</li>

And use this Javascript:

$(document).ready(function () {
    $("#homepagetabs").on("click", "li", function () {
        var $this = $(this);
        var tab_num = $this.attr("data-tab-num");
        show_tab(tab_num);
    });
});

If you decide to keep the inline onclick="javascript:show_tab('1');" stuff, you don't need the javascript: part.

UPDATE:

I realized I didn't handle the fading correctly. Here's the show_tab function I'd use and the event handling:

function show_tab(tab_num) {
    var tabcontents = $(".homepagetabcontent");
    var count = 0;
    tabcontents.fadeOut(400, function () {
        if (++count === tabcontents.length) {
            $("#tabcontent" + tab_num).fadeIn(400);
        }
    });
}

$(document).ready(function () {
    $("#homepagetabs").on("click", "li", function () {
        var $this = $(this);
        $("#homepagetabs").find("li").filter(".currenttab").removeClass("currenttab");
        $this.addClass("currenttab");
        var tab_num = $this.attr("data-tab-num");
        show_tab(tab_num);
    });
});

And still, the HTML structure I'd use:

<div id="homepagetabsdiv">
    <ul id="homepagetabs">
        <li id="tab0" title="Drag and drop this tab to re-arrange the order" data-tab-num="0">Main</li>
        <li id="tab1" title="Drag and drop this tab to re-arrange the order" data-tab-num="1">managers</li>
        <li id="tab2" title="Drag and drop this tab to re-arrange the order" data-tab-num="2">Standings</li>
    </ul>
</div>

<div id="tabcontents">
    <div id="tabcontent0" class="homepagetabcontent">CONTENT0</div>
    <div id="tabcontent1" class="homepagetabcontent">CONTENT1</div>
    <div id="tabcontent2" class="homepagetabcontent">CONTENT2</div>
</div>

DEMO: http://jsfiddle.net/SLBjv/5/

You are obviously welcome to add anything else to your show_tab function that you need, but if you're using jQuery, you might as well use it everywhere you can. That means using it to select/find elements, to change classes, and to change styling, among other things.

Upvotes: 2

Related Questions