Question

我有一个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>

Answer 1

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

选项＃1 - 最喜欢您的代码

我认为您在身份证中不需要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 - 更清洁，更有意义

没有理由用您的内容的网址重载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加载内容。

从jQuery选项卡脚本的链接ID中删除元素

1 个答案: