使用DIV：标题标签的属性，而不是一个：href属性切换的div

Question

我有此脚本使用的一个：href属性标签交换的div出来。我想改为使用具有title属性的div标签。

工作代码

$(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; 
    }); 
}); 

我在尝试使用这种用div标签，但不工作

<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; 
    }); 
}); 

没有得到任何错误，但它不工作的某些原因。

Answer 1

在HTML您提供的title属性是tab-1。
因此，当您获得该值currrentTab将只包含文本tab-1。

添加#选择与tab-1标识的元素：

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

或添加.选择与班上tab-1元素：

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

Answer 2

你缺少一个“＃”在你选择的开头位置：

$(currentTab).fadeIn(1000); 

这导致$('tab-1')的时候应该是$ ('#tab-1')

我想它，当你使用的作品a[href]属性，因为你可能使用类似href="#tab-1"的东西。