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

Posted

技术标签:

【中文标题】如何通过使用引导程序和 HTML/CSS 单击按钮来激活按钮的切换？【英文标题】：How can i activate toggling on a button by clicking on it using bootstrap and HTML/CSS? 【发布时间】：2021-09-18 02:33:53 【问题描述】：

目前我的按钮具有悬停功能，我希望它应该保留在那里，但是当用户单击任何文本（“水，土壤”）时，应该激活切换功能。如本例所示，但我不知道如何通过悬停将其合并到我的代码中：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>

【问题讨论】：

【参考方案1】：

我已经修改了小提琴以使其更易于使用，因为其中有很多未使用的 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>

【讨论】：

以上是关于如何通过使用引导程序和 HTML/CSS 单击按钮来激活按钮的切换？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 document.write('') 之后显示隐藏按钮？

如何使用 Angular 5 和引导程序放置 x 按钮以清除输入字段中的内容

引导页脚旋转问题

如何通过 Javascript / jQuery 在按钮单击时显示引导警报？

如何将数据目标ID传递给另一个jsp引导程序

如何使用 asp.net 按钮单击在引导模式中停止刷新页面