Question

我正在使用引导导航标签。对于所有“ HTML li”选项卡，我将它们显示在导航栏下方的容器中。我想要一个选项卡处于活动状态，然后在导航栏中显示一个按钮。如果选项卡处于非活动状态，则隐藏按钮。我想在2个标签中使用此功能；两者都将显示按钮（一次一个）以及不同的模式目标。当前，我在窗格中显示按钮，从那里，我可以像在窗格中一样隐藏和显示它。下面是我正在尝试的代码，但无法正常工作。

<li><a href="#tab1" data-toggle="pill" onclick="showhide_tab1()" ><b> Tab1</b></a>
</li>

<li><a href="#tab2"  onclick="showhide_tab2()" data-toggle="pill" ><b> Tab2</b></a>
</li>

<li><a href="#tab3" data-toggle="pill" ><b> Tab3</b></a></li>

function showhide_tab1() {
  var x = document.getElementById("tab1_button");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function showhide_tab2() {
  var x = document.getElementById("tab2_button");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


//Buttons on navbar
  <a class="btn btn-danger" id="tab2_button" style="text-decoration:none;display:none;" data-toggle="modal" data-target="#tab2_modal"><i class="fa fa-plus" aria-hidden="true"></i>
     Add</a> 
       <a class="btn btn-danger" id="tab1_button" style="text-decoration:none;display:none;" data-toggle="modal" data-target="#tab1_modal"><i class="fa fa-plus" aria-hidden="true"></i>
     Add</a>

Bootstrap导航选项卡-显示具有活动选项卡的隐藏按钮

0 个答案: