时间戳

首页 > 解决方案 > 如何通过使用引导程序和 HTML/CSS 单击按钮来激活按钮的切换？

html - 如何通过使用引导程序和 HTML/CSS 单击按钮来激活按钮的切换？

问题描述

目前我的按钮具有悬停功能，我希望它应该保留在那里，但是当用户单击任何文本（“水，土壤”）时，应该激活切换功能。如本示例所示，但我无法弄清楚如何通过悬停将其合并到我的代码中：https ://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets

我能够实现简单的切换，但我希望悬停也应该在那里，以便用户可以将鼠标悬停在文本上，当用户点击它时，按钮会被切换。我怎样才能做到这一点。这是小提琴和代码：

https://jsfiddle.net/6u2g58qm/2/

$(document).ready(function() {
  $('#create_btn').on('click', function() {
    $('#create_tab').tab('show')
  })


  $('#login_btn').on('click', function() {
    $('#login_tab').tab('show')
  })

  $('#create_btn').on('click', function() {
    $('#create1_tab').tab('show')
  })
  $(".hover_btn").click(function(e) {
    e.preventDefault();
  })


  $(".hover_btn").mouseenter(function(e) {
    e.preventDefault();
    $("#tab1default").css("opacity", "1");
  })


  $(".hover_btn2").hover(function(e) {
    e.preventDefault();
    $("#tab2default1").css("opacity", "1");
  })

  $(".hover_btn2").mouseleave(function(e) {
    e.preventDefault();
    $("#tab2default").css("opacity", "0");
  })
  $(".hover_btn1").click(function(e) {
    e.preventDefault();
  })


  $(".hover_btn1").mouseenter(function(e) {
    e.preventDefault();
    $("#tab2default").css("opacity", "1");
  })

  $(".hover_btn2").mouseleave(function(e) {
    e.preventDefault();
    $("#tab3default1").css("opacity", "0");
  })
    $(".hover_btn").mouseleave(function(e) {
    e.preventDefault();
    $("#tab1default").css("opacity", "0");
  })
  
  $("#closeButton").click(function(e) {
    e.preventDefault();
    $("#tab1default").css("opacity", "0");
  })
});
#customTab a {
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .container {
    padding: 0;
  }
  .btn {
    padding: 3px 6px;
    font-size: 12px;
  }
  .flex .panel-default {
    margin-right: 4px;
  }
  .flex .panel-default>.panel-heading {
    padding: 0;
  }
  .flex .panel-default>.panel-body .btn:last-child {
    margin-top: 4px;
  }
}

.btn-dark {
  background-color: #343a40;
  color: #fff;
}

.btn-dark:hover,
.btn.focus,
.btn:focus {
  color: #fff;
}

.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
  color: #fff;
  background: blue;
}

.nav-tabs {
  border: none;
}

.hover_btn {
  background-image: url(air.jfif);
  background-size: cover;
  color: #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hover_btn:hover {
  background-image: url(air.jfif);
  background-size: cover;
  color: #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <main>

    <div class="container" id="customTab">
      <ul class="nav " style="display: flex; justify-content: space-around; border: none;">
        <li><a href="#tab1default" data-toggle="collapse" id="test"><span class="hover_btn">Water</span></a>
        </li>
        <li><a href="#tab2default" data-toggle="collapse"><span class="hover_btn1">soil</span></a></li>

      </ul>
    </div>
    <div class="tab-content">
      <div class="hover_btn2">
        <div class="tab-pane fade" id="tab1default">
          <div class="flex ">
            <ul class="nav nav-tabs">
              <li data-toggle="tab"><span class="btn btn-info">1</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane fade hover_btn3" id="tab2default">
      <div class="flex">
        <div class="panel with-nav-tabs panel-default">
          <div class="panel-heading">
            <ul class="nav nav-tabs">
              <li><a href="#tab3default1" data-toggle="tab"><span class="btn btn-info">6</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

标签： htmljquerycsstwitter-bootstrap-3

解决方案

我已经修改了小提琴以使其更易于使用，因为那里有很多未使用的 html（至少对于演示而言）。当您悬停时，它实际上会应用类来触发选项卡。当您将鼠标移出时，这些类将被删​​除。我确实尝试过使用

$(tab).show("tab");

这确实有效，但不幸的是你不能以类似的方式隐藏它。当您单击我使用过的选项卡时

e.stopPropagation();

阻止 Bootstrap 处理点击，并设置一个变量来显示我们是否需要保留选项卡。

单击选项卡后，它将为用户保留，您需要再次单击它以隐藏它。然后，您可以像以前一样继续悬停以显示和隐藏它。

希望这对你有用。

$(document).ready(function() {
var persist = false;

  $(".hover_btn").click(function(e) {
    e.stopPropagation();    
    persist = !persist;
  })
  
  $(".hover_btn").mouseenter(function(e) {   
    e.preventDefault();
        $("#tab1default").removeClass("collapse").addClass("fade").addClass("in").addClass("active");
  });

  $(".hover_btn").mouseleave(function(e) {   
    e.preventDefault();
    if (!persist)
    {
            $("#tab1default").addClass("collapse").removeClass("fade").removeClass("in").removeClass("active");
    }
  });
});
#customTab a {
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .container {
    padding: 0;
  }
  .btn {
    padding: 3px 6px;
    font-size: 12px;
  }
  .flex .panel-default {
    margin-right: 4px;
  }
  .flex .panel-default>.panel-heading {
    padding: 0;
  }
  .flex .panel-default>.panel-body .btn:last-child {
    margin-top: 4px;
  }
}

.btn-dark {
  background-color: #343a40;
  color: #fff;
}

.btn-dark:hover,
.btn.focus,
.btn:focus {
  color: #fff;
}

.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
  color: #fff;
  background: blue;
}

.nav-tabs {
  border: none;
}

.hover_btn {
  background-image: url(air.jfif);
  background-size: cover;
  color: #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hover_btn:hover {
  background-image: url(air.jfif);
  background-size: cover;
  color: #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <main>

    <div class="container" id="customTab">
      <ul class="nav " style="display: flex; justify-content: space-around; border: none;">
        <li><a href="#tab1default" data-toggle="collapse" id="test"><span class="hover_btn">Water</span></a>
        </li>

      </ul>
    </div>
    <div class="tab-content">
      <div class="hover_btn2">
        <div class="tab-pane fade" id="tab1default">
          <div class="flex ">
            <ul class="nav nav-tabs">
              <li id="test" data-toggle="tab"><span class="btn btn-info">1</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane fade hover_btn3" id="tab2default">
      <div class="flex">
        <div class="panel with-nav-tabs panel-default">
          <div class="panel-heading">
            <ul class="nav nav-tabs">
              <li><a href="#tab3default1" data-toggle="tab"><span class="btn btn-info">6</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

推荐阅读