Load tabs only once.

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.cshtml

@@ -28,14 +28,15 @@
                         {
                             var group = Model.SettingPageCreationContext.Groups[i];
                             var active = i == 0 ? "active" : string.Empty;
-                            <li class="nav-item" id="@group.Id">
+                            <li class="nav-item">
-                                <a class="nav-link @active" data-bs-toggle="pill" role="tab">@group.DisplayName</a>
+                                <a class="nav-link @active" id="@group.Id" data-bs-toggle="pill" role="tab">@group.DisplayName</a>
                             </li>
                         }
                     </ul>
                 </div>
                 <div class="col-md-9">
-                    <div class="tab-content" id="tab-content"></div>
+                    <div class="tab-content" id="tab-content">
+                    </div>
                 </div>
             </div>
         </abp-card-body>

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Index.js

@@ -1,19 +1,26 @@
 (function ($) {
     var l = abp.localization.getResource('AbpSettingManagement');
 
-    $('#tabs-nav .nav-item').click(function () {
+    $('#tabs-nav .nav-item .nav-link').click(function () {
-        var id = $(this).attr("id")
+        var _this = $(this);
+        if(_this.attr('data-bs-target') !== undefined) {
+            return;
+        }
+
+        var id = _this.attr("id")
         abp.ui.block({
           elm: '#tab-content',
           busy: true,
           promise: abp.ajax({
-               type: "POST",
+               type: 'POST',
-               url: "SettingManagement?handler=RenderView&id=" + id,
+               url: 'SettingManagement?handler=RenderView&id=' + id,
                dataType: "html",
                contentType: false,
                processData: false
            }).done(function (response) {
-               $('#tab-content').html(response);
+               $('#tab-content').children('.tab-pane').removeClass('show').removeClass('active');
+               _this.attr('data-bs-target', '#' + $.escapeSelector($.escapeSelector(id)));
+               $('#tab-content').append('<div id=' + $.escapeSelector(id) + ' class="tab-pane fade active show">' + response + '</div>');
                abp.event.trigger('Abp.SettingManagement.View.Render.' + id);
            })
         });