我有两个标签，一个用于个人资料视图，另一个用于设置。 onload我想要一个活动的配置文件选项卡，然后在两个选项卡之间切换。
我可以切换两个标签，但是当加载/刷新浏览器时，两个配置文件一个接一个显示！
这是脚本.....
var bflProfile = document.getElementById('profile');
var bflSettings = document.getElementById('settings');
function bflprofile() {
bflProfile.style.display = "block";
bflSettings.style.display = "none";
}
function bflsettings() {
bflProfile.style.display = "none";
bflSettings.style.display = "block";
}
这是标记
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="sidebar" >
<a onclick="bflprofile()" href="javascript:void(0)"><i class="fa fa-pencil"></i> Edit Profile <span><i
class="fa fa-chevron-right"></i></span></a>
<a onclick="bflsettings()" href="javascript:void(0)"><i class="fa fa-cog"></i> Account Settings<span><i
class="fa fa-chevron-right"></i></span></a>
</div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
<div id="profile" class="bflProfile">
<h3>Basic information</h3>
<div class="row">
<div class="col-md-4 col-xs-12">
<!--Profile Image-->
<div class="profileImage pull-left">
<figure class="text-center">
<img class="image-rounded img-fluid" src="images/author.png" alt="codesign_profile">
<figcaption>
<span><i class="fa fa-pencil"></i> change photo</span>
</figcaption>
</figure>
</div>
</div>
<div class="col-md-8 col-xs-12">
<!--Profile Form-->
<div id="profileForm" class="profileForm">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="fName">First Name*</label>
<input type="text" class="form-control" id="fName" aria-describedby="emailHelp"
placeholder="amitichard@gmail.com">
</div>
<div class="form-group col-md-6">
<label for="lName">Last Name*</label>
<input type="text" class="form-control" id="lName" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label for="occupation">Occupation*</label>
<input type="password" class="form-control" id="occupation"
placeholder="amitichard@gmail.com">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label for="bflCompany">Company</label>
<input type="text" name="" id="bflCompany" class="form-control" placeholder="CoDesign Limited">
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<label for="location">Location *</label>
<input type="text" name="" id="location" class="form-control" placeholder="Bangladesh">
</div>
<div class="form-group col-6">
<label for="city">City *</label>
<input type="text" name="" id="city" class="form-control" placeholder="Dhaka">
</div>
</div>
<div class="form-row">
<label for="webUrl">Website URL</label>
<input type="url" name="" id="webUrl" class="form-control" placeholder="www.amithrichard.com">
</div>
</form>
</div>
</div>
</div>
<hr style="margin:30px 0; display: block">
<!--Bio Text-->
<div class="form-row">
<label for="shortBio">short bio</label>
<textarea class="form-control" name="" id="shortBio" cols="30" rows="5">Do you know how to create a memory that lasts forever? I do.You start with a blueprint woven together with a message both simple and powerful that engages you on a deep emotional level. You take that and give it a visual so stunning that it creates something more than a memory- it creates an impression. It changes perception. Design cannot simply serve the purpose of being aesthetically appealing but it must create an impact on whoever it touches. Every piece of work I do contains a part of my passion, creativity and vision which I impart through it.
</textarea>
</div>
<hr style="margin:30px 0; display: block">
<h3>social media links</h3>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/facebook.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control" placeholder="http://facebook.com/amitrichard">
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/linkedin.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/instagram.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/twitter.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/pinterest.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/behance.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/dribbble.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
<div class="socialMedia d-flex">
<div class="kb-icon"><img src="images/google-plus.svg" alt=""></div>
<div class="kb-input">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div id="settings" class="bflSettings">
<h3>account information</h3>
<div id="settingsForm" class="settingsForm">
<form>
<div class="form-group col-md-6">
<label for="exampleInputEmail1">Primary Email Address *</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="amitichard@gmail.com">
</div>
<br/>
<div class="form-group col-md-6">
<label for="bflUsername">Username*</label>
<input type="text" class="form-control" id="bflUsername" placeholder="username">
</div>
<div class="bfl_url col-md-12">
<label for="inlineFormInputGroup">BFL URL</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">http://banglafontlibrary.com/id/</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="richard">
</div>
</div>
<hr style="margin:40px 0; display: block">
<h3>Change Password</h3>
<div class="form-row">
<div class="form-group col-md-6">
<label for="bflPassword">New Password*</label>
<input type="password" class="form-control" id="bflPassword" aria-describedby="emailHelp"
placeholder="amitichard@gmail.com">
</div>
<div class="form-group col-md-6">
<label for="bflUsernameconfirm">Retype New Password*</label>
<input type="text" class="form-control" id="bflUsernameconfirm" placeholder="Password">
</div>
<small>**Password must be a minimum of six letters/characters</small>
</div>
</form>
</div>
</div>
</div>
</div>
因此，我尝试显示一个选项卡内容onload，然后在两个选项卡之间切换。
感谢所有..
答案 0 :(得分：2)
在调用bflprofile()或bflsettings()之前，必须默认显示两个标签。使用CSS中的display: none定义其中一个首先隐藏，或者在页面加载时调用其中一个函数。
例如，如果您希望配置文件成为首先显示的默认配置文件，则可以执行以下操作：
<body onload="bflprofile()">