通过 AJAX 实现 CSS 选项卡内容

【问题标题】：Materialize CSS tabs content via AJAX通过 AJAX 实现 CSS 选项卡内容
【发布时间】：2017-09-26 19:50:03
【问题描述】：

有没有办法通过 AJAX 在物化 CSS 选项卡上加载选项卡的内容，类似于 jQuery UI？ https://jqueryui.com/tabs/#ajax

【问题讨论】：

【解决方案1】：

您可以使用 jQuery UI 选项卡，并按照

$( function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });

确保在您的 Materialize CSS 中包含标签 ID，并在具体化 CSS 之前的脚本标签之前。

【讨论】：

【解决方案2】：

您可以滚动自己的 AJAX 请求并像这样定位标签：

$(document).on('click', '.tab', (function(e){
    var url = $(this).find('a').attr('href');
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: url,
        data: { },
        success: function(data){
            $('#targetElement').html(data);
        }
    });
});

【讨论】：