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？

我可以把它变成一个javascript函数吗？

3 个答案: