How to create a customize selected tab styles in JavaScript

Post Views: 679

Hey guys, today in this post we are going to learn about How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button select.

Files we used in this post example

customTabs.html	HTML File	It is used for Create a Custom Tab in JavaScript
customTabsScript.js	JavaScript File	It is holding JavaScript click functioality for Show/Hide of the Custom Tab Selected Section.
customTabsStyle.css	Style CSS File	It is used for Custom Tab Alignment and Selected Tab Color Style.

Final Output

Other post that would you like to learn

How to Create a Modal Popup With a Form Inside as Shaw/Hide on Click Button Using ‘@track’ Const Variables in Lightning Web Component – LWC
Creating Record in Contact Object and Redirecting to Detail Page Simply Using With ‘@salesforce/schema/Contact’ in Salesforce Lightning Web Component – LWC
How to Create a Customizable Tabs for Salesforce Lightning Component Page Using Component Controller JavaScript
How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component
Dynamic custom dependent picklist in lightning component
Adding a Custom Style CSS for Specific Role & Profile in Salesforce
How to fetch picklist values from apex controller in lightning component

Step 1:- Create HTML File : customTabs.html

customTabs.html [HTML File]

  <!DOCTYPE html>
<html>
<head>
<title>How to create a Customize selected tab styles in JavaScript</title>
<script type="text/javascript" src="include/customTabsScript.js"></script>
<link rel="stylesheet" href="include/customTabsStyle.css" type="text/css" media="all">
</head>
<body>
  
 <div class="tabMenu" id="tabMenu">
  <a href="javascript:void(0)" rel="tab0" class="active" onClick="tabFun(this)">w3web</a> 
  <a href="javascript:void(0)" rel="tab1" onClick="tabFun(this)">Blog</a> 
  <a href="javascript:void(0)" rel="tab2" onClick="tabFun(this)">Tutorial</a>
  <a href="javascript:void(0)" rel="tab3" onClick="tabFun(this)">Technical Guide</a>
  <a href="javascript:void(0)" rel="tab4" onClick="tabFun(this)">w3web Mart</a>
</div>

<div id="tabMainSec">
   <div id="tab0" class="tabList" style="display:block;"> <span class="tabImg"><img src="https://www.w3web.net/wp-content/uploads/2020/08/aboutus.png"  align="top"/></span> w3web.net is the place where you can learn about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Development, Configuration, Customization and much more... <span class="readMore"><a href="#">Read more...</a></span></div>
   
   <div id="tab1" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/08/googleNotSearchYourPage.png" align="top"/></span> <p>It is so important to every website should be index by google. Because without indexing our website does not visible on search engine. If google search does not indexing my page. There are ‘0%’ to chance to get organic traffic. We won’t get any type of organic traffic on search results. </p>
   
<p>Google search engine does not index your site automatically. However if you want to index your website and visible on search results you need to understand about process of Indexing, Crawling & Ranking. <span class="readMore"><a href="#">Read more...</a></span></p>
</div>

   <div id="tab2" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/09/avoidDuplicateWithApex.png" align="top"/></span> Hey guys, today in this post we are going to learn about How to Avoid Duplicate Name Record Simply Using a Apex Controller Method and Validating a Lightning Input Form with Email Regex Pattern Checked and Submit on Click Button in Salesforce Lightning. <span class="readMore"><a href="#">Read more...</a></span></div>
   
    <div id="tab3" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/07/remote-app2-1-1.png"  align="top"/></span> Many people writing a Blog or Article. There can be multiple pages in a single article, if you have not good hand typing speed you will be face so many difficulty.<br/><br/>

If you want to write a article English or Hindi very fast than go through the “Remote Mouse App”. <span class="readMore"><a href="#">Read more...</a></span>

</div>
   
     <div id="tab4" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/10/w3webmart_SquareBanner.png"  align="top"/></span> An easy way to online shopping by - www.w3webmart.com such like as Headphone with Mic, Kids Clothing Store, Mens Clothing Store,Mobile Phone, Womens Clothing Store. <span class="readMore"><a href="#">Read more...</a></span></div>
      
</div>

<script type="text/javascript">
 </script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>How to create a Customize selected tab styles in JavaScript</title>

</head>

<body>

<a href="javascript:void(0)" rel="tab2" onClick="tabFun(this)">Tutorial</a>

<a href="javascript:void(0)" rel="tab3" onClick="tabFun(this)">Technical Guide</a>

</div>

<div id="tab0" class="tabList" style="display:block;"> <span class="tabImg"><img src="https://www.w3web.net/wp-content/uploads/2020/08/aboutus.png" align="top"/></span> w3web.net is the place where you can learn about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Development, Configuration, Customization and much more... <span class="readMore"><a href="#">Read more...</a></span></div>

<div id="tab1" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/08/googleNotSearchYourPage.png" align="top"/></span> <p>It is so important to every website should be index by google. Because without indexing our website does not visible on search engine. If google search does not indexing my page. There are ‘0%’ to chance to get organic traffic. We won’t get any type of organic traffic on search results. </p>

<p>Google search engine does not index your site automatically. However if you want to index your website and visible on search results you need to understand about process of Indexing, Crawling & Ranking. <span class="readMore"><a href="#">Read more...</a></span></p>

</div>

<div id="tab2" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/09/avoidDuplicateWithApex.png" align="top"/></span> Hey guys, today in this post we are going to learn about How to Avoid Duplicate Name Record Simply Using a Apex Controller Method and Validating a Lightning Input Form with Email Regex Pattern Checked and Submit on Click Button in Salesforce Lightning. <span class="readMore"><a href="#">Read more...</a></span></div>

<div id="tab3" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/07/remote-app2-1-1.png" align="top"/></span> Many people writing a Blog or Article. There can be multiple pages in a single article, if you have not good hand typing speed you will be face so many difficulty.<br/><br/>

If you want to write a article English or Hindi very fast than go through the “Remote Mouse App”. <span class="readMore"><a href="#">Read more...</a></span>

</div>

<div id="tab4" class="tabList"><span class="tabImg"> <img src="https://www.w3web.net/wp-content/uploads/2020/10/w3webmart_SquareBanner.png" align="top"/></span> An easy way to online shopping by - www.w3webmart.com such like as Headphone with Mic, Kids Clothing Store, Mens Clothing Store,Mobile Phone, Womens Clothing Store. <span class="readMore"><a href="#">Read more...</a></span></div>

</div>

</script>

</body>

</html>

Step 2:- Create JavaScript File : customTabsScript.js

customTabsScript.js [JavaScript File]

   function tabFun(thisEl){   
     var getRel = thisEl.rel;
     var showRelTab = document.getElementById(getRel).style;
     var tabMainList = document.getElementById('tabMainSec').querySelectorAll('.tabList');
     var tabLinkItem = document.getElementById('tabMenu').querySelectorAll('a');
     //alert(tabMainList);
     
     for(i=0; i<tabMainList.length; i++){      
      tabMainList[i].style.display='none';
      tabLinkItem[i].className='';
     }
     
     showRelTab.display='block';
     thisEl.className='active';
   }

function tabFun(thisEl){

var getRel = thisEl.rel;

var showRelTab = document.getElementById(getRel).style;

var tabMainList = document.getElementById('tabMainSec').querySelectorAll('.tabList');

var tabLinkItem = document.getElementById('tabMenu').querySelectorAll('a');

//alert(tabMainList);

for(i=0; i<tabMainList.length; i++){

tabMainList[i].style.display='none';

tabLinkItem[i].className='';

}

showRelTab.display='block';

thisEl.className='active';

}

Step 3:- Create Style CSS : customTabsStyle.css

customTabsStyle.css [Style CSS File]

  body{ font-size: 14px; font-family: arial;}
.tabMenu{font-size: 13px; color: #333; margin-bottom: 15px; border-bottom:1px #ccc solid;}
.tabMenu a{text-decoration: none; color: #333;  padding: 5px 10px; display:inline-block; border:1px #ccc solid; border-bottom:0; border-radius:5px 5px 0 0;}
.tabMenu a:hover{text-decoration: none; color: #fff; background:#990000; }  
.tabMenu a.active{text-decoration: none; color: #fff; background:#990000; position:relative; padding: 6px 10px 5px 10px; bottom:-1px; }  
.tabList{display: none;}
.tabImg{width:150px; float:left; display:inline-block; margin-right:10px;}
.tabImg img{width:150px; height:100px;}
.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;}

body{ font-size: 14px; font-family: arial;}

.tabMenu{font-size: 13px; color: #333; margin-bottom: 15px; border-bottom:1px #ccc solid;}

.tabMenu a{text-decoration: none; color: #333; padding: 5px 10px; display:inline-block; border:1px #ccc solid; border-bottom:0; border-radius:5px 5px 0 0;}

.tabMenu a:hover{text-decoration: none; color: #fff; background:#990000; }

.tabMenu a.active{text-decoration: none; color: #fff; background:#990000; position:relative; padding: 6px 10px 5px 10px; bottom:-1px; }

.tabList{display: none;}

.tabImg{width:150px; float:left; display:inline-block; margin-right:10px;}

.tabImg img{width:150px; height:100px;}

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

Further post that would you like to learn

2 thoughts on “How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button”

idsbuddy

December 19, 2020 at 9:47 am

Hi. your post is so nice and I really loved reading your post.
It was very well authored and easy to understand. Great Thanks for sharing awesome info. I really love to read your blog.
pinjara khubsurti kaa

December 19, 2020 at 12:59 pm

Really very happy to say,your post is very interesting to read.I never stop myself to say something about it.You’re doing a great job.Keep it up

How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button

Files we used in this post example

customTabs.html [HTML File]

customTabsScript.js [JavaScript File]

customTabsStyle.css [Style CSS File]

Related Topics

2 thoughts on “How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button”

Leave a Comment Cancel reply

Files we used in this post example

customTabs.html [HTML File]

customTabsScript.js [JavaScript File]

customTabsStyle.css [Style CSS File]

Related Topics

2 thoughts on “How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button”

Leave a Comment Cancel reply

Please Contribute to Support If Some Value Added in Your Project or Website