r04/nav.html · 约 3269 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>导航组件</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-title">导航组件</div>
13 <div class="sub">🎨 UI Kit</div>
14 </header>
15 <main class="main">
16
17<div class="card">
18 <h3><span class="dot"></span>Tabs 标签</h3>
19 <div class="tabs" id="tabs"><div class="t on" data-t="0">全部</div><div class="t" data-t="1">进行中</div><div class="t" data-t="2">已完成</div></div>
20 <div class="panel on" data-p="0"><div class="cell"><div class="tt">设计登录页</div><div class="ar">›</div></div><div class="cell"><div class="tt">编写组件文档</div><div class="ar">›</div></div><div class="cell"><div class="tt">修复主题变量</div><div class="ar">›</div></div></div>
21 <div class="panel" data-p="1"><div class="cell"><div class="tt">设计登录页</div><div class="ar">›</div></div><div class="cell"><div class="tt">修复主题变量</div><div class="ar">›</div></div></div>
22 <div class="panel" data-p="2"><div class="cell"><div class="tt">编写组件文档</div><div class="ar">›</div></div></div>
23</div>
24<div class="card">
25 <h3><span class="dot"></span>Swiper 轮播</h3>
26 <div class="swiper">
27 <div class="s" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)">🎨 设计系统</div>
28 <div class="s" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">🔥 热门模板</div>
29 <div class="s" style="background:linear-gradient(135deg,#10b981,#06b6d4)">🌿 绿色主题</div>
30 </div>
31</div>
32<div class="card">
33 <h3><span class="dot"></span>NavBar 顶部导航</h3>
34 <div class="top" style="position:static;border-radius:12px;"><span class="back">‹</span><div class="top-title" style="font-size:15px;">返回</div><div class="sub">更多</div></div>
35</div>
36<div class="card">
37 <h3><span class="dot"></span>TabBar 底部标签栏</h3>
38 <div class="nav" style="position:static;transform:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;">
39 <a class="on" href="javascript:void(0)">🏠<span>首页</span></a><a href="javascript:void(0)">🔍<span>发现</span></a><a href="javascript:void(0)">➕<span>发布</span></a><a href="javascript:void(0)">💬<span>消息</span></a><a href="javascript:void(0)">👤<span>我的</span></a>
40 </div>
41</div>
42
43 </main>
44 <nav class="nav">
45 <a href="index.html" class="">🏠<span>总览</span></a>
46 <a href="basic.html" class="">🧩<span>组件</span></a>
47 <a href="form.html" class="">📝<span>表单</span></a>
48 <a href="feedback.html" class="">💬<span>反馈</span></a>
49 <a href="about.html" class="">ℹ️<span>说明</span></a>
50 </nav>
51</div>
52<script>
53document.querySelectorAll('#tabs .t').forEach(function(t){t.addEventListener('click',function(){var i=t.dataset.t;document.querySelectorAll('#tabs .t').forEach(function(x){x.classList.remove('on');});t.classList.add('on');document.querySelectorAll('.panel').forEach(function(p){p.classList.toggle('on',p.dataset.p===i);});});});
54</script>
55</body>
56</html>