Skrypt do zamiany języków na stronie

Stworzenie prostego skryptu do zamiany języków na stronie internetowej można zrealizować na wiele sposobów, ale najczęściej wykorzystuje się do tego HTML, CSS oraz JavaScript. Poniżej znajdziesz przykładowy skrypt oraz instrukcje, jak go zaimplementować na stronie.

Przykładowy Skrypt do Zamiany Języków

HTML: Utworzymy prostą stronę z przyciskami do zmiany języka oraz sekcjami z tekstem w różnych językach.
CSS: Stworzymy prosty styl, aby przyciski były dobrze widoczne.
JavaScript: Skrypt do przełączania języków.

Krok 1: HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona z Zamianą Języków</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="language-switcher">
        <button id="pl" onclick="changeLanguage('pl')">Polski</button>
        <button id="en" onclick="changeLanguage('en')">English</button>
    </div>
    
    <div id="content">
        <div class="language" id="content-pl">
            <h1>Witamy na naszej stronie!</h1>
            <p>To jest przykładowy tekst w języku polskim.</p>
        </div>
        <div class="language" id="content-en" style="display: none;">
            <h1>Welcome to our website!</h1>
            <p>This is a sample text in English.</p>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Krok 2: CSS

Utwórz plik styles.css z poniższą zawartością:

body {
    font-family: Arial, sans-serif;
}

.language-switcher {
    margin: 20px;
}

button {
    margin-right: 10px;
    padding: 10px 15px;
    font-size: 16px;
}

.language {
    margin-top: 20px;
}

Krok 3: JavaScript

Utwórz plik script.js z poniższą zawartością:

function changeLanguage(lang) {
    // Ukryj wszystkie sekcje językowe
    const languages = document.querySelectorAll('.language');
    languages.forEach((element) => {
        element.style.display = 'none';
    });

    // Pokaż sekcję wybranego języka
    const selectedLanguage = document.getElementById(`content-${lang}`);
    selectedLanguage.style.display = 'block';
}

Opis Implementacji

HTML: Zdefiniowano dwa przyciski do przełączania języków. Każdy przycisk ma przypisaną funkcję changeLanguage, która zmienia język w oparciu o wartość przekazywaną jako argument (pl dla polskiego i en dla angielskiego).
CSS: Stylizacje przycisków i sekcji treści, aby były bardziej estetyczne.
JavaScript: Funkcja changeLanguage najpierw ukrywa wszystkie sekcje językowe, a następnie pokazuje tę, która odpowiada wybranemu językowi. Używamy selektora document.querySelectorAll, aby uzyskać wszystkie sekcje z klasą language, a następnie ustawiamy ich styl display na none. Po tym wyświetlamy odpowiednią sekcję, zmieniając styl display na block.

Użycie

Skopiuj powyższy kod do odpowiednich plików (index.html, styles.css, script.js).
Otwórz plik index.html w przeglądarce, aby zobaczyć stronę w działaniu. Po kliknięciu na przyciski języków zmieni się wyświetlany tekst.

Rozbudowa

Możesz dodać więcej języków, tworząc kolejne sekcje div z odpowiednim identyfikatorem oraz dodając kolejne przyciski w sekcji językowej.