如何让非焦点状态的Bootstrap标签页链接呈现暗淡效果？

没问题，我帮你搞定这个需求，先给你补全并优化后的完整代码，再拆解关键细节：

完整代码 #

<!-- 引入本地的Bootstrap CSS（建议用v4或v5版本，确保兼容性） -->
<link rel="stylesheet" href="bootstrap.min.css">

<style>
/* 自定义标签页样式：实现非激活状态暗淡，激活状态高亮 */
.nav-tabs > li > a {
    /* 非激活标签的暗淡效果 */
    opacity: 0.6;
    color: #6c757d; /* Bootstrap默认灰色，风格更统一 */
    transition: all 0.3s ease; /* 切换时的平滑过渡动画 */
}

.nav-tabs > li > a:hover {
    /* 鼠标悬停时稍微提亮 */
    opacity: 0.8;
    color: #495057;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    /* 激活状态的标签：完全不透明，用主题色高亮 */
    opacity: 1;
    color: #007bff;
    border-bottom-color: #fff; /* 去掉激活标签底部边框，和内容区无缝衔接 */
}

/* 可选：美化panel容器 */
.panel.with-nav-tabs.panel-default {
    border-radius: 8px;
    overflow: hidden;
}

.panel-heading {
    padding: 0;
}

.tab-content {
    padding: 1.5rem;
}
</style>

<div class="col-12 col-sm-6 form card z-depth-3">
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <!-- 第一个标签：登录表单 -->
                <li class="active">
                    <a href="#tab1default" data-toggle="tab">登录</a>
                </li>
                <!-- 第二个标签：注册表单 -->
                <li>
                    <a href="#tab2default" data-toggle="tab">注册</a>
                </li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <!-- 登录表单内容 -->
                <div class="tab-pane fade in active" id="tab1default">
                    <form>
                        <div class="form-group">
                            <label for="login-email">邮箱</label>
                            <input type="email" class="form-control" id="login-email" placeholder="输入邮箱">
                        </div>
                        <div class="form-group">
                            <label for="login-password">密码</label>
                            <input type="password" class="form-control" id="login-password" placeholder="输入密码">
                        </div>
                        <button type="submit" class="btn btn-primary">登录</button>
                    </form>
                </div>
                <!-- 注册表单内容 -->
                <div class="tab-pane fade" id="tab2default">
                    <form>
                        <div class="form-group">
                            <label for="register-name">用户名</label>
                            <input type="text" class="form-control" id="register-name" placeholder="输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="register-email">邮箱</label>
                            <input type="email" class="form-control" id="register-email" placeholder="输入邮箱">
                        </div>
                        <div class="form-group">
                            <label for="register-password">密码</label>
                            <input type="password" class="form-control" id="register-password" placeholder="设置密码">
                        </div>
                        <button type="submit" class="btn btn-success">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入本地的Bootstrap JS和jQuery（Bootstrap v4需要jQuery，v5则不需要） -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

关键细节说明 #

• 标签页切换逻辑：利用Bootstrap自带的data-toggle="tab"（v5版本改为data-bs-toggle="tab"）属性，点击标签时自动切换对应的tab-pane内容，同时给激活标签添加active类，这是实现样式切换的核心。
• 暗淡效果实现：通过CSS的opacity属性控制非激活标签的透明度，配合transition属性实现平滑过渡，避免切换时的生硬感。
• 样式优化：调整了激活标签的底部边框，让它和内容区无缝衔接，同时采用Bootstrap默认颜色体系，保持整体风格统一。
• 兼容性：Bootstrap v4需要引入jQuery，v5则不需要，样式逻辑完全通用。

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