Question

我已经实现了垂直制表符，但是由于某种原因，它会在整个屏幕上成倍增加。我怀疑是自举，但不确定。

https://www.w3schools.com/howto/howto_js_vertical_tabs.asp 这是我获取垂直标签的代码的地方

这是问题的图片：https://imgur.com/lqNlIAk （图像链接仍然无法正常工作）尝试将一些引导程序更改为无济于事。

<div style="padding-top:100px;padding-bottom:100px" class="container">
    <div class="row">
        <div class="col-md-3 ">
             <div class="list-group">
              <a id="defaultOpen" style="padding: .75rem 1.25rem;" href="openCity(event, 'Dashb')" class="tablinks list-group-item list-group-item-action btn">Account Dashboard</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Info')" class="tablinks list-group-item list-group-item-action btn">Account Information</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Adbook')" class="tablinks list-group-item list-group-item-action btn">Address Book</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Orders')" class="tablinks list-group-item list-group-item-action btn">My Orders</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Preview')" class="tablinks list-group-item list-group-item-action btn">My Product Reviews</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Newsl')" class="tablinks list-group-item list-group-item-action btn">NewsLetter</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Psub')" class="tablinks list-group-item list-group-item-action btn">My Product Subscribtions</a>
              <a style="padding: .75rem 1.25rem;" href="openCity(event, 'Creditc')" class="tablinks list-group-item list-group-item-action btn">My Credit Cards</a>
            </div> 
        </div>

<div class="col-md-9">
 <div id="Dashb" class="card tabcontent">
<div class="card-body">
 <div class="row">
 <div class="col-md-12">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <form>
                              <div class="form-group row">
                                <label for="username" class="col-4 col-form-label">User Name</label> 
                                <div class="col-8">
                                  <input id="username" name="username" placeholder="Username" class="form-control here" required="required" type="text">
                                </div>
                              </div>
                              <div class="form-group row">
                                <label for="name" class="col-4 col-form-label">First Name</label> 
                                <div class="col-8">
                                  <input id="name" name="name" placeholder="First Name" class="form-control here" type="text">
                                </div>
                              </div>
                              <div class="form-group row">
                                <label for="lastname" class="col-4 col-form-label">Last Name</label> 
                                <div class="col-8">
                                  <input id="lastname" name="lastname" placeholder="Last Name" class="form-control here" type="text">
                                </div>
                              </div>

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Answer 1

需要一段JavaScript来隐藏tabcontent才能启动，并且只显示第一个标签。它不在W3C文章中，而是在他们的“试用”页面中：

 document.getElementById("defaultOpen").click();

您需要将其放在JavaScript的底部（函数之外）。

有关W3C的文章可能更清楚。如果没有这一行，所有的tabcontent块都会以可见的方式开始显示，如您所见。

或者，您可以默认使用CSS隐藏tabcontent块并显示第一个。 JS行比较简单，但是您[可能会在页面加载之前稍有闪烁，然后它会隐藏选项卡。

JavaScript垂直制表符无法正常工作

1 个答案: