html语言下拉切换

	  <style>


    /* Language Selector Styles */
    .language-selector {
        position: relative;
        display: inline-block;
        
        font-family: Arial, sans-serif;
    }

    .language-selector-button {
        display: flex;
        align-items: center;
        gap: 8px;
        
        background: #ffffff00;
        border: 0px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: all 0.3s ease;
    }

    .language-selector-button:hover {
        border-color: #4CAF50;
    }

    .language-selector-button img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
    }

    .language-selector-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 5px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        min-width: 150px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .language-selector.active .language-selector-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .language-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .language-option:hover {
        background: #f5f5f5;
    }

    .language-option.active {
        background: #f0f0f0;
        color: #4CAF50;
    }

    .language-option img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Add to existing media queries */
    @media screen and (max-width: 768px) {
        .language-selector {
            margin: 10px;
        }

        .language-selector-button {
            padding: 6px 12px;
            font-size: 12px;
        }

        .language-option {
            padding: 8px 12px;
            font-size: 12px;
        }
    }
</style>



<div class="language-selector">
    <div class="language-selector-button">
        <img src="https://flagcdn.com/w40/us.png" alt="Current Language" id="currentLangFlag">
        <span id="currentLangText">English</span>
        <span class="arrow">▼</span>
    </div>
    <div class="language-selector-dropdown">
        <div class="language-option active" data-lang="en" data-flag="us">
            <img src="https://flagcdn.com/w40/us.png" alt="English">
            <span>English</span>
        </div>
        <div class="language-option" data-lang="zh" data-flag="cn">
            <img src="https://flagcdn.com/w40/cn.png" alt="中文">
            <span>中文</span>
        </div>
        <div class="language-option" data-lang="ja" data-flag="jp">
            <img src="https://flagcdn.com/w40/jp.png" alt="日本語">
            <span>日本語</span>
        </div>
      
    </div>
</div>

<script>


    // Language Selector Functionality
    document.addEventListener('DOMContentLoaded', function() {
        const languageSelector = document.querySelector('.language-selector');
        const languageButton = document.querySelector('.language-selector-button');
        const languageOptions = document.querySelectorAll('.language-option');
        const currentLangFlag = document.getElementById('currentLangFlag');
        const currentLangText = document.getElementById('currentLangText');

        // Toggle dropdown
        languageButton.addEventListener('click', (e) => {
            e.stopPropagation();
            languageSelector.classList.toggle('active');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!languageSelector.contains(e.target)) {
                languageSelector.classList.remove('active');
            }
        });

        // Handle language selection
        languageOptions.forEach(option => {
            option.addEventListener('click', () => {
                const lang = option.dataset.lang;
                const flag = option.dataset.flag;
                const text = option.querySelector('span').textContent;

                // Update current language display
                currentLangFlag.src = `https://flagcdn.com/w40/${flag}.png`;
                currentLangText.textContent = text;

                // Update active state
                languageOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');

                // Close dropdown
                languageSelector.classList.remove('active');

                // Here you can add your language change logic
                console.log(`Language changed to: ${lang}`);
                
                // Example: You could trigger a language change event
                // document.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang } }));
            });
        });

        // Handle keyboard navigation
        languageButton.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                languageSelector.classList.toggle('active');
            }
        });

        languageOptions.forEach(option => {
            option.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    option.click();
                }
            });
        });
    });
</script>