根据点击喜好自动排序的响应式网址导航单页模板

davidzhang78

已于 2023-06-18 22:43:39 修改

阅读量262

点赞数

文章标签：数学建模算法 java

于 2023-06-17 15:16:54 首次发布

本文链接：https://blog.csdn.net/davidzhang78/article/details/131260437

版权

最近想做个自己经常用的网址导航页，其实就类似把自己的bookmark收藏页做个导航。

简单做了个单页模板如下，可以在此基础上继续个性化定制自己想要的效果。

导航可以实现简单的根据自己的点击喜好自动优化排序的功能。

<!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>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        .link-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .link-list li {
            width: 100%;
            margin-bottom: 10px;
        }

        .link-list li a {
            color: #333;
            text-decoration: none;
            display: block;
            padding: 5px 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            transition: background-color 0.3s ease;
            text-align: center; /* 添加居中显示 */
        }

        .link-list li a:hover {
            background-color: #e0e0e0;
        }

        .link-list li .description {
            display: none;
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }

        .link-list li a:hover + .description {
            display: block;
        }

        .visited {
            font-weight: bold;
        }

        /* 响应式样式 */
        @media (min-width: 600px) {
            .link-list li {
                width: 19%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>网址导航</h1>
        <ul class="link-list" id="linkList">
            <li>
                <a href="https://www.example1.com">示例网站1</a>
                <div class="description">这是示例网站1的简介。</div>
            </li>
            <li>
                <a href="https://www.example2.com">示例网站2</a>
                <div class="description">这是示例网站2的简介。</div>
            </li>
            <li>
                <a href="https://www.example3.com">示例网站3</a>
                <div class="description">这是示例网站3的简介。</div>
            </li>
            <li>
                <a href="https://www.example4.com">示例网站4</a>
                <div class="description">这是示例网站4的简介。</div>
            </li>
            <li>
                <a href="https://www.example5.com">示例网站5</a>
                <div class="description">这是示例网站5的简介。</div>
            </li>
            <!-- 添加更多网址链接 -->
        </ul>
    </div>

    <script>
        // 获取本地存储的点击次数数据，如果不存在则初始化为空对象
        const clickData = JSON.parse(localStorage.getItem('clickData')) || {};

        // 根据点击次数排序网址列表
        function sortLinkList() {
            const linkList = document.getElementById('linkList');
            const links = Array.from(linkList.getElementsByTagName('a'));
            links.sort((a, b) => {
                const aClicks = clickData[a.href] || 0;
                const bClicks = clickData[b.href] || 0;
                return bClicks - aClicks;
            });
            linkList.innerHTML = '';
            links.forEach(link => {
                linkList.appendChild(link.parentNode);
            });
        }

        // 绑定点击事件，更新点击次数并存储到本地
        document.addEventListener('click', e => {
            const target = e.target;
            if (target.tagName === 'A') {
                const href = target.href;
                clickData[href] = (clickData[href] || 0) + 1;
                localStorage.setItem('clickData', JSON.stringify(clickData));
                sortLinkList();
            }
        });

        // 初始化页面时进行排序
        sortLinkList();
    </script>
</body>
</html>

davidzhang78

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
根据点击喜好自动排序的响应式网址导航单页模板

最近想做个自己经常用的网址导航页，其实就类似把自己的bookmark收藏页做个导航。简单做了个单页模板如下，可以在此基础上继续个性化定制自己想要的效果。导航可以实现简单的根据自己的点击喜好自动优化排序的功能。
复制链接

扫一扫