从jQuery选项卡脚本的链接ID中删除元素 - Removing element from link ID for jQuery tab script

Removing element from link ID for jQuery tab script

我有一个jQuery选项卡脚本，它从链接定义的PHP文件中获取内容，并将其解析为div元素。每个链接的ID用于从正确的文件中提取内容，但是选项卡需要在链接ID中使用type_才能工作，这样就不会从正确的位置提取内容。如何解决这个问题?

这是我当前的jQuery代码:

function load(url){
    $.ajax({
        url:url,
        success:function(message){
            $("#content").html(message);
        }
    });
}
$(document).ready(function(){
    $("[id^=type_]").click(function(){
        type=$(this).attr("id");
        url=""+type+".php";
        $("[id^=type_]").removeClass("selected");
        $("#"+type).addClass("selected");
        load(url);
        return false;
    });
    $("#type_search").click();
});

这是我的HTML代码:

<ul> 
<li><a id="type_tab1" href="javascript:void(null);">Tab1</a></li> 
<li><a id="type_tab2" href="javascript:void(null);">Tab2</a></li> 
<li><a id="type_tab3" href="javascript:void(null);">Tab3</a></li> 
</ul>

根据您的描述，我认为您的意思是内容位于tab1.php, tab2.php等，问题在于您的ID中的type_前缀。

选项#1 -最像你的代码

我认为你不需要在id中使用type_。似乎您可以在每个锚(如

)上使用class='tab'来完成相同的事情。

<li><a id="tab1" class="tab" href="javascript:void(null);">Tab1</a></li>

，然后做

$('.tab').click(function() {
    var tabId = $(this).attr("id");
    var url=""+tabId+".php";
    $('.tab').removeClass("selected");
    $('#' + tabId).addClass("selected");
    load(url);
    return false;
}

选项#2 -更干净，更有意义

没有理由用内容的url重载ID属性。试一试:

<li><a id="tab1" class="tab" href="/path/to/content/tab1.php">Tab1</a></li>

通常情况下，这将带您到内容，但您可以通过以下方式防止默认行为:

$('.tab').click(function(event) {
    // Prevent actually going to the content
    event.preventDefault();
    // Adjust tabs
    var $currentTab = $(this);        
    $('.tab').removeClass("selected");
    $currentTab.addClass("selected");
    // Load content from the href attribute of the tab          
    load($currentTab.attr("href"));
    return false;
}

选项#3 -这已经是一个JQuery扩展

你考虑过使用JQuery UI标签吗?http://jqueryui.com/demos/tabs/我发现演示站点有时有点不稳定，但是JQuery UI非常流行、稳定和灵活。有一个通过AJAX加载内容的选项