在JavaScript Android App中使用可切换标签页失效，求助实现温度/距离转换器

我帮你把标签页的切换功能修复好了，同时还实现了温度转换器和距离转换器的完整功能，你可以直接用下面的代码替换原来的内容：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 标签页样式 */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        /* 标签页内容样式 */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }

        .tabcontent.active {
            display: block;
        }

        /* 转换器样式 */
        .converter {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 5px;
        }

        .converter input {
            padding: 8px;
            margin: 5px 0;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="app">
        <!-- Tab links -->
        <div class="tab">
            <button class="tablinks active" onclick="openTab(event, 'temperature')">温度转换器</button>
            <button class="tablinks" onclick="openTab(event, 'distance')">距离转换器</button>
        </div>

        <!-- 温度转换器标签内容 -->
        <div id="temperature" class="tabcontent active">
            <h3>温度转换器</h3>
            <div class="converter">
                <label>摄氏度:</label>
                <input type="number" id="celsius" oninput="convertTemperature('celsius')" placeholder="输入摄氏度">
                <br>
                <label>华氏度:</label>
                <input type="number" id="fahrenheit" oninput="convertTemperature('fahrenheit')" placeholder="输入华氏度">
            </div>
        </div>

        <!-- 距离转换器标签内容 -->
        <div id="distance" class="tabcontent">
            <h3>距离转换器</h3>
            <div class="converter">
                <label>公里:</label>
                <input type="number" id="km" oninput="convertDistance('km')" placeholder="输入公里数">
                <br>
                <label>英里:</label>
                <input type="number" id="miles" oninput="convertDistance('miles')" placeholder="输入英里数">
            </div>
        </div>
    </div>

    <script>
        // 标签页切换函数
        function openTab(evt, tabName) {
            // 获取所有标签内容和标签按钮
            let tabcontent = document.getElementsByClassName("tabcontent");
            let tablinks = document.getElementsByClassName("tablinks");

            // 隐藏所有标签内容
            for (let i = 0; i < tabcontent.length; i++) {
                tabcontent[i].classList.remove("active");
            }

            // 移除所有标签按钮的激活状态
            for (let i = 0; i < tablinks.length; i++) {
                tablinks[i].classList.remove("active");
            }

            // 显示当前选中的标签内容，激活对应的按钮
            document.getElementById(tabName).classList.add("active");
            evt.currentTarget.classList.add("active");
        }

        // 温度转换函数
        function convertTemperature(from) {
            const celsiusInput = document.getElementById('celsius');
            const fahrenheitInput = document.getElementById('fahrenheit');

            if (from === 'celsius') {
                const celsius = parseFloat(celsiusInput.value);
                if (!isNaN(celsius)) {
                    fahrenheitInput.value = (celsius * 9/5 + 32).toFixed(2);
                } else {
                    fahrenheitInput.value = '';
                }
            } else {
                const fahrenheit = parseFloat(fahrenheitInput.value);
                if (!isNaN(fahrenheit)) {
                    celsiusInput.value = ((fahrenheit - 32) * 5/9).toFixed(2);
                } else {
                    celsiusInput.value = '';
                }
            }
        }

        // 距离转换函数
        function convertDistance(from) {
            const kmInput = document.getElementById('km');
            const milesInput = document.getElementById('miles');
            const kmToMiles = 0.621371;

            if (from === 'km') {
                const km = parseFloat(kmInput.value);
                if (!isNaN(km)) {
                    milesInput.value = (km * kmToMiles).toFixed(2);
                } else {
                    milesInput.value = '';
                }
            } else {
                const miles = parseFloat(milesInput.value);
                if (!isNaN(miles)) {
                    kmInput.value = (miles / kmToMiles).toFixed(2);
                } else {
                    kmInput.value = '';
                }
            }
        }
    </script>
</body>
</html>

关键功能说明： #

• 标签页切换：openTab函数会先清除所有标签的激活状态，再给当前点击的标签和对应内容添加active类，确保只有选中的标签内容显示。
• 温度转换器：支持摄氏度和华氏度的双向实时转换，输入时自动计算结果并保留两位小数。
• 距离转换器：支持公里和英里的双向实时转换，同样会自动计算并格式化结果。

你可以把这段代码放到你的Android WebView里运行，标签切换和转换器功能都能正常工作啦~

内容的提问来源于stack exchange，提问作者Pete Foster