Bootstrap 引导垂直选项卡在鼠标悬停时显示内容

wvt8vs2t 于 2023-03-06 发布在 Bootstrap

关注(0)|答案(2)|浏览(176)

我在 Bootstrap 中创建了一些选项卡，我希望在鼠标悬停时显示这些选项卡
这是选项卡https://jsfiddle.net/uzfxmrs3/
这是html

<div class="d-flex align-items-start responsive-tab-menu">

        <ul class="nav flex-column nav-pills nav-tabs-dropdown me-3" id="v-pills-tab" role="tablist"
            aria-orientation="vertical">
            <li class="nav-item">
                <a class="nav-link text-start active" href="#" id="v-pills-home-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-start" href="#" id="v-pills-profile-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                    aria-selected="false">Profile</a>
            </li>
        </ul>

        <div class="tab-content responsive-tab-content" id="v-pills-tabContent" style="border:1px solid #708090; width:600px;height:200px;">
            <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"
                tabindex="0">home content</div>
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"
                tabindex="0">profile content</div>

        </div>
    </div>

这是jquery

$('.nav-tabs-dropdown')
            .on("mouseover", ".nav-link:not('.active')", function (event) {
                $(this).closest('ul').removeClass("open");
            })
            .on("mouseover", ".nav-link.active", function (event) {
                $(this).closest('ul').toggleClass("open");
            });

当前代码仅在单击时显示内容。

twitter-bootstrap

来源：https://stackoverflow.com/questions/75642459/bootstrap-vertical-tabs-show-content-on-mouseover

2条答案

按热度按时间

kxxlusnw1#

您可以将jquery更改为如下形式：

添加$（this）. tab（'show '）;如下所示：

$('.nav-tabs-dropdown')
    .on("mouseenter", ".nav-link:not('.active')", function (event) {
    $(this).closest('ul').removeClass("open");
    $(this).tab('show');
  })
    .on("mouseenter", ".nav-link.active", function (event) {
    $(this).closest('ul').toggleClass("open");
  });

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

mm9b1k5b2#

我做了垂直菜单，只显示悬停/鼠标悬停像这样
https://jsfiddle.net/8jn240b5/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $(document).ready(function() {
      $(".vertical-tabs a").mouseover(function() {
        // get the ID of the tab to show
        var tabId = $(this).data("tab");
        // hide all tab content
        $(".tab-pane").hide();
        // show the selected tab content
        $("#" + tabId).show();
        // add active class to selected tab link
        $(this).addClass("active");
      });
      $(".vertical-tabs a").mouseout(function() {
        // remove active class from all tab links
        $(".vertical-tabs a").removeClass("active");
        // hide all tab content
        $(".tab-pane").hide();
      });
    });
  </script>
  <div class="vertical-tabs col-3" style="margin-top:50px;z-index:1000">
    <ul class="">
      <li style="width:100px">
        <a href="#" data-tab="tab1">Tab 1</a>
      </li>
      <li style="width:100px">
        <a href="#" data-tab="tab2">Tab 2</a>
      </li>
      <li style="width:100px">
        <a href="#" data-tab="tab3">Tab 3</a>
      </li>
    </ul>
    <div class="tab-content" style="margin-top:-16%;z-index:1000;margin-left:13%;">
      <div id="tab1" class="tab-pane" style="min-height:300px !important">Content for Tab 1</div>
      <div id="tab2" class="tab-pane" style="min-height:300px !important">Content for Tab 2</div>
      <div id="tab3" class="tab-pane" style="min-height:300px !important">Content for Tab 3</div>
    </div>
  </div>
  <style>
    .vertical-tabs {
      display: flex;
      flex-direction: column;
    }

    .vertical-tabs ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .vertical-tabs li {
      margin: 0;
      padding: 0;
    }

    .vertical-tabs a {
      display: block;
      padding: 10px;
      background-color: #eee;
      color: #333;
      text-decoration: none;
      border: 1px solid #ccc;
    }

    .vertical-tabs a.active {
      background-color: #ccc;
    }

    .tab-content {
      margin-top: 10px;
    }

    .tab-pane {
      display: inline-block;
      width: 600px;
      background-color: white;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>

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

我来回答

Bootstrap 引导垂直选项卡在鼠标悬停时显示内容

2条答案

相关问题

热门标签

最新问答