SHARE
TWEET

Kode CSS HTML TABS

pustakakoran Jan 24th, 2017 292 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. body {font-family: "Lato", sans-serif;}
  5.  
  6. ul.tab {
  7.     list-style-type: none;
  8.     margin: 0;
  9.     padding: 0;
  10.     overflow: hidden;
  11.     border: 1px solid #ccc;
  12.     background-color: #f1f1f1;
  13. }
  14.  
  15. /* Float the list items side by side */
  16. ul.tab li {float: left;}
  17.  
  18. /* Style the links inside the list items */
  19. ul.tab li a {
  20.     display: inline-block;
  21.     color: black;
  22.     text-align: center;
  23.     padding: 14px 16px;
  24.     text-decoration: none;
  25.     transition: 0.3s;
  26.     font-size: 17px;
  27. }
  28.  
  29. /* Change background color of links on hover */
  30. ul.tab li a:hover {
  31.     background-color: #ddd;
  32. }
  33.  
  34. /* Create an active/current tablink class */
  35. ul.tab li a:focus, .active {
  36.     background-color: #ccc;
  37. }
  38.  
  39. /* Style the tab content */
  40. .tabcontent {
  41.     display: none;
  42.     padding: 6px 12px;
  43.     border: 1px solid #ccc;
  44.     border-top: none;
  45. }
  46. </style>
  47. <body>
  48.  
  49. <p>In this example, we use JavaScript to "click" on the London link, to open the tab on page load.</p>
  50.  
  51. <ul class="tab">
  52.   <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</a></li>
  53.   <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  54.   <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
  55. </ul>
  56.  
  57. <div id="London" class="tabcontent">
  58.   <h3>London</h3>
  59.   <p>London is the capital city of England.</p>
  60. </div>
  61.  
  62. <div id="Paris" class="tabcontent">
  63.   <h3>Paris</h3>
  64.   <p>Paris is the capital of France.</p>
  65. </div>
  66.  
  67. <div id="Tokyo" class="tabcontent">
  68.   <h3>Tokyo</h3>
  69.   <p>Tokyo is the capital of Japan.</p>
  70. </div>
  71.  
  72. <script>
  73. function openCity(evt, cityName) {
  74.     var i, tabcontent, tablinks;
  75.     tabcontent = document.getElementsByClassName("tabcontent");
  76.     for (i = 0; i < tabcontent.length; i++) {
  77.         tabcontent[i].style.display = "none";
  78.     }
  79.     tablinks = document.getElementsByClassName("tablinks");
  80.     for (i = 0; i < tablinks.length; i++) {
  81.         tablinks[i].className = tablinks[i].className.replace(" active", "");
  82.     }
  83.     document.getElementById(cityName).style.display = "block";
  84.     evt.currentTarget.className += " active";
  85. }
  86.  
  87. // Get the element with id="defaultOpen" and click on it
  88. document.getElementById("defaultOpen").click();
  89. </script>
  90.      
  91. </body>
  92. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top