how to create horizontal tabs in html?

Today, We want to share with you html tabs example with code.In this post we will show you how to create horizontal tabs in html, hear for html tabs without javascript we will give you demo and example for implement.In this post, we will learn about Bootstrap get active tabs index using jQuery with an example.

Free Live Chat for Any Issue

html tabs example with code using jquery

Example 1: tab link class in html

  <!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 
  'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 
  'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 
  'Tokyo')">Tokyo</button>

</div>

<!-- Tab content -->
<div id="London" class="tabcartctdata">
  <h3>London</h3>
  
<p>London is the capital city of England.</p>
</div>

<div 
id="Paris" class="tabcartctdata">
  <h3>Paris</h3>
  <p>Paris 
is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcartctdata">
  
<h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div> 

tab in html

<!-- Answer to: "tab in html" -->

<!--
  Since Tab is a character-entity of U+0009 you can set the
  width of the Tab by using tab-size in CSS.
-->

tab link class in html

  /* Style the tab */
.tab {
  overflow: hidden;
  
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

  
/* Style the buttons that are used to open the tab cartctdata */
.tab button {

    
  background-color: inherit;
  float: left;
  
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover 
  */
.tab button:hover {
  background-color: #ddd;

  }

/* Create an active/current tablink class */
.tab button.active 
  {
  background-color: #ccc;
}

/* Style the tab cartctdata */
.tabcartctdata {

    
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
} 

Download

I hope you get an idea about CSS3-Only Tabbed Area.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.