两种Bootstrap的list group 选中

最新推荐文章于 2024-10-08 09:00:00 发布

原创最新推荐文章于 2024-10-08 09:00:00 发布 · 837 阅读

0 ·

CC 4.0 BY-SA版权

问答社区专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用Thymeleaf和HTML构建的响应式导航菜单，该菜单包含活动状态和徽章提示，适用于个人博客或网站的用户界面设计。菜单项包括我的问题和最新回复，并带有动态类名绑定，以突出当前选中的部分。

<div class="list-group">
                <a href="#"  th:class="${section=='questions'}? 'active list-group-item' : 'list-group-item'">我的问题</a>
                <a href="#"  th:class="${section=='reply'}? 'active list-group-item' : 'list-group-item'">
                    最新回复
                    <span class="badge">14</span>
                </a>
                <a href="#"  class="list-group-item" th:classappend="${section=='questions'}? 'active ' : ''">我的问题</a>
                <a href="#"  class="list-group-item" th:classappend="${section=='reply'}? 'active' : ''">
                    最新回复
                    <span class="badge">14</span>
                </a>
            </div>