Laden Sie den Inhalt im Bootstrap-Navigationsregister dynamisch mithilfe von JQuery aus der Laravel-Ressource ⇐ HTML

[Guest]

Ich arbeite an Laravel-Apps. Ich muss Inhalte von Laravel laden und sie mithilfe von HTML, Javascript (und jQuery) basierend auf dem ausgewählten .nav-link-Element anzeigen.
HTML

Code: Select all

[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 (mit jQuery)[/b]

Code: Select all

$(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');
});
});
});

Controller

Code: Select all

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'));
}
}

Routen

Code: Select all

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');

Ansicht (Über, Kontakt und Zuhause)

Code: Select all

{{ $data['title'] }}

{{ $data['content'] }}

Dieser Code lädt jedoch nur die Registerkarte Home. Wenn ich auf die Registerkarte Info oder Kontakt klicke, wird nur der Inhalt der Registerkarte Startseite angezeigt.
Wenn ich die Registerkarte überprüfe Wenn ich in den Entwicklertools des Browsers auf die Registerkarte „Netzwerk“ gehe, werden mir die Anfragebasen auf der Registerkarte angezeigt, auf die ich geklickt habe.
Wie kann ich die richtige Registerkarte anzeigen?