求助：如何制作如图所示的带边框Navbar导航栏

根据你提供的代码和需求，我帮你调整了代码，实现持久的选中状态并修正视觉布局：

第一步：优化HTML结构 #

将<div>替换为语义化的<a>标签（导航项本质是链接），并给当前选中的项添加.active类：

<div class="navbar">
    <a href="#" class="box active">งานพัฒนานักศึกษา</a>
    <a href="#" class="box">งานบริการการศึกษา</a>
</div>

第二步：修正CSS样式 #

主要调整了选中状态的持久化、边框布局和视觉细节：

/* 定义全局变量（若未在全局设置可直接替换为具体颜色值） */
:root {
    --primary-color: #15325B;
    --gray-color1: #ccc;
}

.navbar {
    display: flex;
    font-family: psuStidi-Bold;
    border-bottom: 1px solid var(--gray-color1);
    align-items: flex-end; /* 让导航项与底部边框对齐，消除间隙 */
}

.navbar .box {
    margin: 0 5px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--primary-color);
    background-color: #b0b0b0;
    border: 1px solid var(--gray-color1);
    border-bottom: none;
    border-radius: 5px 5px 0 0; /* 添加顶部圆角，贴合标签样式 */
    transition: background-color 0.2s ease;
    cursor: pointer; /* 鼠标悬停显示指针，提升交互感 */
}

/* 用.active类替代:active伪类，实现持久选中状态 */
.navbar .box.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* 添加hover效果，增强交互反馈 */
.navbar .box:hover:not(.active) {
    background-color: #d0d0d0;
}

关键修改说明 #

• 替换:active为.active类：:active仅在点击瞬间生效，.active可通过JS切换，实现持久选中状态
• 调整.navbar的align-items: flex-end：确保导航项底部与导航栏边框对齐，消除视觉间隙
• 添加顶部圆角：让标签样式更贴合常见导航栏设计
• 统一选中项边框颜色：与背景色一致，视觉更协调
• 补充hover效果：提升用户交互体验

如果需要切换选中状态，可添加简单JS代码：

document.querySelectorAll('.navbar .box').forEach(item => {
    item.addEventListener('click', function() {
        document.querySelectorAll('.navbar .box').forEach(i => i.classList.remove('active'));
        this.classList.add('active');
    });
});

内容的提问来源于stack exchange，提问作者adilan waelohma