[英]Switching between two tabs using native JS
我有兩個選項卡，一個用於個人資料視圖，一個用於設置 。 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>
因此，我嘗試顯示一個標簽內容加載，然后在兩個標簽之間切換。
謝謝大家..
在bflprofile()或bflsettings()之前，兩個選項卡都必須默認為顯示。 要么使用display: none首先定義其中之一display: none在CSS中display: none ，或者在頁面加載時調用您的函數之一。
例如，如果您希望配置文件是顯示在最前面的默認配置文件，則可以執行以下操作：
<body onload="bflprofile()">
僅使用javascript和html在瀏覽器中在相同的兩個選項卡之間切換
[英]Switching between the same two tabs only in a browser using javascript and html
使用 React Native Navigation 在屏幕之間切換並導入 JS
[英]Switching Between Screens with React Native Navigation and importing JS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.