工具大全

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>工具大全</title>
        <style>
            /*全局重置*/
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
                font-family: 'Segoe UI', sans-serif;
                background-color: #f4f6f9;
            }

            /*容器：占满屏幕*/
            .container {
                width: 100vw;
                height: 100vh;
                display: flex;
                flex-direction: column;
                background-color: #fff;
                border-radius: 0;
                box-shadow: 0 0 0 transparent;
            }

            /*Tab 标签栏*/
            .tabs {
                display: flex;
                border-bottom: 1px solid #ddd;
                background-color: #f1f1f1;
                padding: 0;
                margin: 0;
                gap: 10px;
                align-items: center;
            }

            .tab {
                padding: 8px 10px;
                cursor: pointer;
                font-weight: 500;
                border: 1px solid transparent;
                border-bottom: none;
                border-radius: 5px 5px 0 0;
                transition: all 0.3s ease;
                white-space: nowrap;
                min-width: 20px;
                text-align: center;
            }

            .tab.active {
                background-color: #007bff;
                color: white;
                border-color: #007bff;
                border-bottom: 1px solid #fff;
            }

            .tab:hover {
                background-color: #e0e0e0;
            }

            /*内容区域：自适应高度*/
            .tab-content {
                display: none;
                flex: 1;
                overflow: hidden;
                border: 1px solid #ddd;
                border-top: none;
                background-color: #fafafa;
                position: relative;
            }

            .tab-content.active {
                display: block;
            }

            /*iframe：占满整个内容区域*/
            iframe {
                width: 100%;
                height: 100%;
                border: none;
                background-color: #fff;
                display: block;
            }

            /*适配移动端*/
            @media (max-width: 768px) {
                .tabs {
                    flex-wrap: wrap;
                    padding: 5px;
                }

                .tab {
                    padding: 8px 12px;
                    font-size: 14px;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <!-- Tab 标签-->
            <div class="tabs">
                <div class="tab active" data-tab="tab1"> DDL</div>
                <div class="tab" data-tab="tab2"> XXX</div>
            </div>

            <!--内容区域-->
            <div id="tab1" class="tab-content active">
                <iframe src="pages/DDL.html" frameborder="0" ></iframe>
            </div>
            <div id="tab2" class="tab-content">
                <iframe src="pages/Java.html" frameborder="0"></iframe>
            </div>
        </div>

        <script>
            const STORAGE_PREFIX = 'form_data_';

            function saveFormData(tabId) {
                const iframe = document.querySelector(`#`+tabId + ` iframe`);
                if (!iframe) return;
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                const inputs = iframeDoc.querySelectorAll('input, textarea, select');
                const data = {};
                inputs.forEach(input => {
                    const name = input.name || input.id;
                    if (name) {
                        data[name] = input.value;
                    }
                });

                localStorage.setItem(STORAGE_PREFIX + tabId, JSON.stringify(data));
            }

            function restoreFormData(tabId) {
                const iframe = document.querySelector(`#`+tabId + ` iframe`);
                if (!iframe) return;

                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                const saved = localStorage.getItem(STORAGE_PREFIX + tabId);
                if (!saved) return;

                try {
                    const data = JSON.parse(saved);
                    const inputs = iframeDoc.querySelectorAll('input, textarea, select');

                    inputs.forEach(input => {
                        const name = input.name || input.id;
                        if (name && data[name] !== undefined) {
                            input.value = data[name];
                        }
                    });
                } catch (e) {
                    console.warn('恢复表单数据失败：',e);
                }
            }

            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click',() => {
                    const tabId = tab.getAttribute('data-tab');

                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
					document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

                    tab.classList.add('active');
                    document.getElementById(tabId).classList.add('active');

                    const currentTabId = document.querySelector('.tab.active').getAttribute('data-tab');
                    saveFormData(currentTabId);

                    const iframe = document.querySelector(`#`+tabId+ ` iframe`);
                    iframe.onload = () => {
                        restoreFormData(tabId);
                    };

                    if (iframe.contentDocument) {
                        restoreFormData(tabId);
                    }
                });
            });

            document.addEventListener('DOMContentLoaded', ()=>{
                const initialTab = new URLSearchParams(window.location.hash.slice(1)).get('tab') || 'home';
                const tabElement = document.querySelector(`.tab[data-tab="${initialTab}"]`);
                if (tabElement) {
                    tabElement.click();
                }else {
                    document.querySelector('.tab').click();
                }
                document.addEventListener('input', function (e) {
                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT'){
                        const currentTab = document.querySelector('.tab.active').getAttribute('data-tab');
                        saveFormData(currentTab);
                    }
                });
            });

            window.addEventListener('hashchange', ()=>{
                const tab = new URLSearchParams(window.location.hash.slice(1)).get('tab');
                if (tab && document.querySelector(`.tab[data-tab="${tab}"]`)) {
                    const tabElement = document.querySelector(`.tab[data-tab="${tab}"]`);
                    if (!tabElement.classList.contains('active')) {
                        tabElement.click();
                    }
                }
            });
        </script>
        
    </body>
</html>
posted @ 2025-09-19 09:34 小城边阅读(4) 评论(0) 收藏举报
刷新页面返回顶部
工具大全

公告
