Switching between two tabs using native JS

Question

I have two tabs one for profile view and one for settings. onload I want one active profile tab, and then switching between two tabs.

My switching two tabs okay, but when load/refresh browser two profile showing one after another!

Here is the script.....

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

Here is the Markup

    
      
         Edit Profile 
         Account Settings
      
    

    
      
        Basic information

        
          

            
            
              
                
                
                   change photo
                
              

            
          

          

            
            
              
                

                  
                    First Name*
                    
                  
                  
                    Last Name*
                    
                  

                

                
                  
                    Occupation*
                    
                  
                

                
                  
                    Company
                    
                  
                

                
                  
                    Location *
                    
                  

                  
                    City *
                    
                  
                


                
                  Website URL
                  
                

              


            
          
        

        
        
        
          short bio
          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.

          
        
        

        social media links

        
          

            
              
              
                
              
            
            
              
              
                
              
            
            
              
              
                
              
            
            
              
              
                
              
            

          

          
            
              
              
                
              
            
            
              
              
                
              

            
            
              
              
                
              
            
            
              
              
                
              
            

          
        




      
      
        account information

        
          
            
              Primary Email Address *
              
            
            

            
              Username*
              
            

            
              BFL URL
              
                
                  http://banglafontlibrary.com/id/
                
                
              
            

            

            Change Password
            

              
                New Password*
                
              
              
                Retype New Password*
                
              



              **Password must be a minimum of six letters/characters

So I try to show one tab content onload and then switching between two tabs.

Thanks to all..

kshetline · Accepted Answer

Both of your tabs must default to being displayed before bflprofile() or bflsettings() is called. Either define one of them to be hidden first using display: none in CSS, or call one of your functions when the page loads.

If you want the profile to be the default that shows first, for instance, you could do this:

Switching between two tabs using native JS

Answers (1)

Related Questions