Create custom dynamically change horizontal tab function using while loop in javaScript

[vijayk3327]

In this post we are going to learn about How to Create custom dynamically change horizontal tab function using while loop in javascript.

👉 Get source code live demo link:-

Custom dynamically change horizontal tab in JavaScript
Step 1:- Create HTML : tab-menuWhileLoop_w3web.html

`

<title>Create custom tabs using JavaScript, CSS </title> <style type="text/css"> body{ font-size: 14px; font-family: arial;} .tabMenu{font-size: 17px; color: #333; margin-bottom: 15px; } .tabMenu a{text-decoration: none; color: #fff; background-image: linear-gradient(180deg, #bb2200, #b9b900); border-right: 1px #ccc solid; padding: 5px 10px; min-width:100px; text-align:center; display:inline-block;} .tabMenu a:hover{text-decoration: none; color: #ffff00;} .tabMenu a.active{text-decoration: none; background-image: linear-gradient(#00726e, #fff); color: #fff;} .tabList{display: none;} .tabBg{border:1px #ddd solid; background:#eee; padding: 0 0 10px 0; width:70%; background-image: linear-gradient(#fff, #ebebeb);} .tabContent{display:block; padding:15px; font-size:14px; overflow: hidden;} .tabContent .postImage{display: inline-block; float: left; margin-right: 20px;} .tabContent .postImage img{border:1px #ddd solid;} .readMore{font-size:14px; font-weight:bold; display:inline-block; padding:0 0 0 10px;} .readMore a{color:#ff0000; text-decoration:none;} .readMore a:hover{color:#04a5ca; text-decoration:underline;} .titleTag{font-size:18px;} .titleTag a{color:#003333; font-weight:bold;} .imgRt{width:55%; float:left;} </style> <script type="text/javascript"> function tabFun(a,b){ var i=1; while(document.getElementById('a' + i)){ document.getElementById('a' + i).style.display='none'; document.getElementById('v' + i).className=''; i++; } document.getElementById(a).style.display='block'; document.getElementById(b).className='active'; } </script>

Salesforce LWC Tutorial W3web Technical Guide C

Trigger W3web

Use template if:true and template if:false condition in LWC.

Use template if:true and template if:false condition to display content in LWC

Today in this post we are going to learn about How do you use template if:true and template if:false condition to display content in lightning web component – LWC. more →

Trigger W3web

Salesforce Tutorial Easy to Learn Step-by-Step.

Learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC)

w3web.net is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much. more →

Technical Guide

Collection of Lightning Component Library.

A Collection of Lightning Component Library, Developer Guide and Lightning Design System (SLDS)

ind step-by-step aura documentation component example, Lightning Component Library, Developer guide and Lightning design system. Aura Component:- Input Aura Component:- Date/Time Input Aura Component. more →

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

`

👉 Get source code live demo link:-