使用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"的東西。