css 我想要这样的导航菜单[关闭]

w3nuxt5m 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(127)

已关闭，此问题需要更focused。目前不接受答复。
**想改善这个问题吗？**更新问题，使其仅通过editing this post关注一个问题。

5天前关闭。
Improve this question
enter image description here
当我点击那些圆圈时，我想在方框中使用语言html5 css3 bootstrap JavaScript的相关结果。
还有悬停效应

css

来源：https://stackoverflow.com/questions/76512828/i-want-navigation-menu-like-this

1条答案

按热度按时间

km0tfn4u1#

如果你使用的是bootstrap，正如你所说的那样。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>

    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">One</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">Two</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">Three</div>

    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">Four</div>
  </div>
</div>

如果你使用Bootstrap框架。检查文档中的垂直选项卡。
https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior

赞(0）回复(0）举报 2023-06-25

我来回答

css 我想要这样的导航菜单[关闭]

1条答案

相关问题

热门标签

最新问答