Question

I have this script that uses an a:href attribute tag to swap divs out. I’d like to instead use a div tag with the title attribute.

Working code

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs2 ul li:first').addClass('active');

    $('#tabs2 ul li a').click(function () {
        $('#tabs2 ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).fadeIn(1000);
        return false;
    });
});

My attempt at using this with a div tag but is not working

<div id="tabs2">
  <ul class="nav">
    <li class="pc"><div class="tab-1" title="tab-1">text</div></li>
  </ul>
</div>

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs2 ul li:first').addClass('active');

    $('#tabs2 ul li div').click(function () {
        $('#tabs2 ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('title');
        $('#tabs div').hide();
        $(currentTab).fadeIn(1000);
        return false;
    });
});

Not getting any errors but its not working for some reason.

Answer 1

In the HTML you provided the title attribute is tab-1.
Thus when you obtain that value currrentTab will only contain text tab-1.

Add the # to select an element with the id of tab-1:

$('#' + currentTab).fadeIn(1000);

Or add the . to select an element with the class of tab-1:

$('.' + currentTab).fadeIn(1000);