A Pen by 101 Computing

Thumbnail
This awesome code was written by 101Computing, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 101Computing ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  101 Computing</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>
<br/>
<div id="tab1Content">
  This is the content to display in the first tab.
</div>
<div id="tab2Content">
  Welcome to tab 2!
</div>
<div id="tab3Content">
  Tab 3 is probably the best of the three tabs.
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/101Computing/a-pen-by-101-computing-CgAtn */
#tab1, #tab2, #tab3 {
  float: left;
  padding: 5px 10px 5px 10px;
  background: #B00098;
  color: #FFFFFF;
  margin: 0px 5px 0px 5px;
}

#tab1:hover, #tab2:hover, #tab3:hover {
  background: #E800C9;
}

#tab1Content, #tab2Content, #tab3Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
}

#tab1Content {
 display: block; 
}

#tab2Content, #tab3Content {
 display: none; 
}}


/*Downloaded from https://www.codeseek.co/101Computing/a-pen-by-101-computing-CgAtn */
function selectTab(tabIndex) {
  //Hide All Tabs
  document.getElementById('tab1Content').style.display="none";
  document.getElementById('tab2Content').style.display="none";
  document.getElementById('tab3Content').style.display="none";
  
  //Show the Selected Tab
  document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
}

Comments