我可以把它變成一個JavaScript函數嗎？

Question

$("#tab1").click(function(){ 
     loadTab(1); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

是否有可能使上面的代碼到一個函數在那裏我可以這樣稱呼它

tab(TAB NUMBER HERE); 

，並把它添加/刪除正確的風格/ div的？

爲腳本的整個代碼如下

<script type="text/javascript"> 
// array of pages to load 
var pageUrl = new Array();   
pageUrl[1] = "page1.php"; 
pageUrl[2] = "somepage2.php"; 
pageUrl[3] = "lastpage3.php"; 

// function to load page into DIV 
function loadTab(id) { 
    if (pageUrl[id].length > 0) { 
     $("#loading").show(); 
     $.ajax({ 
      url: pageUrl[id], 
      cache: false, 
      success: function (message) { 
       $("#tabcontent").empty().append(message); 
       $("#loading").hide(); 
      } 
     }); 
    } 
} 

$(document).ready(function(){ 
    $("#loading").hide(); 
    $("#tab1").click(function(){ 
     loadTab(1); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab2").click(function(){ 
     loadTab(2); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 

    $("#tab3").click(function(){ 
     loadTab(3); 
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
    }); 

    alert(window.location.hash); 
</script> 

Answer 1

我建議建立一個封閉，將產生你的「選項卡中單擊功能」。這樣調用事件時的this參數仍然是DOM對象。

// this function creates an event function for a specified tab number. 
function makeTabClick(tabNumber) { 

    // this function is the actual event handler 
    return function(e) { 
    loadTab(tabNumber); 
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
    $(this).addClass('selected'); 
    }; 
} 

$('#tab1').click(makeTabClick(1));  
$('#tab2').click(makeTabClick(2));  
$('#tab3').click(makeTabClick(3)); 

另一種選擇，多了幾分「jQuery的」方式 - 創建將產生你想要的點擊處理程序插件的功能。

$.fn.makeTab = function(tabNumber) { 
    return this.click(function(e) { 
    loadTab(tabNumber); 
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
    $(this).addClass('selected'); 
    }); 
} 

$('#tab1').makeTab(1); 
$('#tab2').makeTab(2); 
$('#tab3').makeTab(3); 

Answer 2

function tab(num) { 
    loadTab(num); 
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected'); 
    $(this).addClass('selected'); 
} 

但如果這將是錨的點擊處理程序，那麼你可以這樣做：

function tab(evt) { 
    loadTab(num); 
    $('div.HOMEtabdiv ul.HOMEtabs a').each(function(i) { 
     if(evt.target != this) 
      $(this).removeClass('selected'); 
     else 
      $(this).addClass('selected'); 
    } 
} 

如果#tab1是一個包裝，那麼你仍然可以得到在each使用this（錨）包裝（#tab1）。您所要做的就是確保點擊事件放置在所有適當的元素上。

Answer 3

你看看： http://docs.jquery.com/UI/Tabs？