Javascript 第一次打开网站时，所有选项卡的内容都可见

我在我的网站中实现了一些选项卡，但是当我第一次重新加载网站时，所有选项卡的内容都是可见的，当我选择任何一个选项卡时，它都会得到修复

截图：

这是我的密码：

HTML

<div class="tab">
                <div class="tablinks" onclick="openCity(event, 'PaisleyWilkes')">
                    <img src="image 1.png" alt="" class="avatar">
                    <div class="details">
                        <span class="name">Paisley Wilkes</span><br>
                        <span class="designation">UI/UX</span>
                    </div>
                </div>
                <div class="tablinks" onclick="openCity(event, 'JohnSmith')">
                    <img src="image 1.png" alt="" class="avatar">
                    <div class="details">
                        <span class="name">John Smith</span><br>
                        <span class="designation">UI/UX</span>
                    </div>
                </div>
                <div class="tablinks" onclick="openCity(event, 'JaneSmith')">
                    <img src="image 1.png" alt="" class="avatar">
                    <div class="details">
                        <span class="name">Jane Smith</span><br>
                        <span class="designation">UI/UX</span>
                    </div>
                </div>
            </div>

            <div class="testimonials-content">
                <div id="PaisleyWilkes" class="tabcontent">
                    <h3>Paisley Wilkes says</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus amet consequuntur libero hic quod, omnis natus totam vero repellendus aperiam eveniet. Adipisci voluptatibus a recusandae suscipit commodi minus sunt esse!</p>
                </div>
                <div id="JohnSmith" class="tabcontent">
                    <h3>John Smith says</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus amet consequuntur libero hic quod, omnis natus totam vero repellendus aperiam eveniet. Adipisci voluptatibus a recusandae suscipit commodi minus sunt esse!</p>
                </div>
                <div id="JaneSmith" class="tabcontent">
                    <h3>Jane Smith says</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus amet consequuntur libero hic quod, omnis natus totam vero repellendus aperiam eveniet. Adipisci voluptatibus a recusandae suscipit commodi minus sunt esse!</p>
                </div>

佩斯利·威尔克斯

用户界面/用户体验
约翰·史密斯

用户界面/用户体验
简·史密斯

用户界面/用户体验
佩斯利·威尔克斯说
我的同僚们都是精英。在自由的世界里，所有的人都会被驱赶。一个普通的人，一个普通的人

约翰·史密斯说
我的同僚们都是精英。在自由的世界里，所有的人都会被驱赶。一个普通的人，一个普通的人

简·史密斯说
我的同僚们都是精英。在自由的世界里，所有的人都会被驱赶。一个普通的人，一个普通的人

JS

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";
}

函数openCity（evt，cityName）{
//声明所有变量
var i，tabcontent，tablinks；
//使用class=“tabcontent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

---

我想在页面首次加载时预选第一个选项卡，我该如何操作？

尝试设置

显示：无到您的css。当页面加载时，它不会显示它。您的js函数非常好，但一开始您没有将它们全部设置为不可见（
display:none；
）。这可以解决你的问题。如果这不是您正在等待的答案，请告诉我，以便我们可以讨论并解决它
您可以使用一些方法来实现它

您可以在不想显示的元素中添加css类
display:none
，并在init处删除
active
类
在启动时设置一次
使用classList.toggle为什么不先添加css类
none
，然后在init之后切换它们呢？很高兴这有帮助：）
$(document).on('pageinit',function(){
    ...
});