Динамически загружать контент в загрузочную навигационную вкладку, используя jquery из ресурса laravel ⇐ Html

[Anonymous]

Я работаю над приложениями Laravel. Мне нужно загрузить контент из Laravel и показать его с помощью HTML, JavaScript (и jQuery) на основе выбранного элемента .nav-link.
HTML

Код: Выделить всё

[list]
[*]
[url={{ route(] 'home']) }}" data-id="home" data-url="{{ route('tabs.home') }}">Home[/url]

[*]
[url={{ route(] 'about']) }}" data-id="about" data-url="{{ route('tabs.about') }}">About[/url]

[*]
[url={{ route(] 'contact']) }}" data-id="contact" data-url="{{ route('tabs.contact') }}">Contact[/url]

[/list]


Loading...

Loading...

Loading...

Javascript (с использованием jQuery)[/b]

Код: Выделить всё

$(document).ready(function() {
// Get the active tab link
var activeTab = $('.nav-tabs .active');

// Get the URL for the active tab content
var activeTabUrl = activeTab.attr('data-url');

// Fetch the content for the active tab via AJAX
$.get(activeTabUrl, function(data) {
$('#' + activeTab.attr('data-id')).html(data);
});

// Listen for the click event on each tab link
$('.nav-tabs a').on('click', function(event) {
// Prevent the default link behavior
event.preventDefault();

// Get the URL for the selected tab content
var tabUrl = $(this).attr('data-url');

// Fetch the content for the selected tab via AJAX
$.get(tabUrl, function(data) {
// Update the tab content with the fetched data
$('#' + $(event.target).attr('data-id')).html(data);

// Activate the selected tab
$('.nav-tabs a').removeClass('active');
$(event.target).addClass('active');
});
});
});

контроллер

Код: Выделить всё

class TabsController extends Controller
{
public function index(Request $request)
{
$tab = $request->input('tab', 'home', 'about', 'contact');

return view('tabs.index', compact('tab'));
}

public function home()
{
$data = ['title' => 'Home', 'content' => 'Welcome to our home page!'];

return view('tabs.home', compact('data'));
}

public function about()
{
$data = ['title' => 'About', 'content' => 'Learn more about our company and our team.'];

return view('tabs.about', compact('data'));
}

public function contact()
{
$data = ['title' => 'Contact', 'content' => 'Get in touch with us!'];

return view('tabs.contact', compact('data'));
}
}

маршруты

Код: Выделить всё

Route::get('/tabs', [TabsController::class, 'index'])->name('tabs.index');
Route::get('/home', [TabsController::class, 'home'])->name('tabs.home');
Route::get('/about', [TabsController::class, 'about'])->name('tabs.about');
Route::get('/contact', [TabsController::class, 'contact'])->name('tabs.contact');

просмотр (о компании, контактах и ​​домашней странице)

Код: Выделить всё

{{ $data['title'] }}

{{ $data['content'] }}

Однако этот код загружает только вкладку home. Когда я нажимаю вкладку о или контакт, отображается только содержимое вкладки главная.
Когда я проверяю >Сеть в инструментах разработчика браузера, я вижу базы запросов на вкладке, которую я щелкнул.
Как мне показать правильную вкладку?

Подробнее здесь: https://stackoverflow.com/questions/793 ... l-resource