Могу ли я превратить это в функцию 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 - это оболочка, то вы все равно можете получить оболочку (#tab1), используя this (якорь) в each. Все, что вам нужно сделать, это убедиться, что событие click размещено на всех соответствующих элементах.

Answer 3

Вы проверили: http://docs.jquery.com/UI/Tabs?