Блог

У меня есть HTML-страница с 4 различными категориями сервисов, которые мне нужны для изменения вкладок на той же странице при нажатии.

This is my code - https://codepen.io/Aeu/pen/ExyVOpY

До сих пор все, что я пытался, это найти там сценарии переключения вкладок и обернуть их вокруг моего кода, но он получается ужасно неправильно сконфигурированным.

 /* Table CSS */

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

table {
  width: 100%;
  table-layout: fixed;
}

.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}

.tbl-content {
  height: 300px;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

th {
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}

td {
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

@import url(https://fonts.googleapis.com/css?family=Arvo:400,700);
body {
  background: #3B393A;
  font-family: 'Arvo', sans-serif;
}

section {
  margin: 50px;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}  

 <section>
  <table cellpadding="0" cellspacing="0" border="0">
    <thead>
      <tr>
        <th>Service</th>
        <th>Price</th>
        <th>Description</th>
      </tr>
    </thead>
  </table>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr>
          <td>Service 1</td>
          <td>1,000</td>
          <td>blank</td>
        </tr>
        <tr>
          <td>Service 2</td>
          <td>1,000</td>
          <td>blank</td>
        </tr>
        <tr>
          <td>HService 3</td>
          <td>1,000</td>
          <td>blank</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>  

Я добавил вкладки в ваш код: https://codepen.io/schinken82/pen/KKMdrOJ

HTML:

     <div class="tabs">
    <div class="tab" id="tab1" onclick="tab1();">Tab 1 </div>
    <div class="tab" id="tab2" onclick="tab2();">Tab 2 </div>
    <div class="tab" id="tab3" onclick="tab3();">Tab 3 </div>
    <div class="tab" id="tab4" onclick="tab4();">Tab 4 </div>    
    </div>
  

CSS:

     /*Styling the tabs*/
.tabs{
  display: flex;
}
.tab{
  color: #fafafa;
  font-size: 14px;
  border-bottom: 2px solid;
  margin-right: 10px;
  border-color: grey;
  cursor: pointer;
}
.tab.activetab{
  color: white;
  font-size: 14px;
  border-bottom: 2px solid;
  margin-right: 10px;
  border-color: white;
}
  

JS:

 function tab1(){
   let tab1 = document.getElementById("tab1")
   let tab2 = document.getElementById("tab2")
   let tab3 = document.getElementById("tab3")
   let tab4 = document.getElementById("tab4")
   tab1.classList.add("activetab");
   tab2.classList.remove("activetab");
   tab3.classList.remove("activetab");
   tab4.classList.remove("activetab");
}
function tab2(){
   let tab1 = document.getElementById("tab1")
   let tab2 = document.getElementById("tab2")
   let tab3 = document.getElementById("tab3")
   let tab4 = document.getElementById("tab4")
   tab1.classList.remove("activetab");
   tab2.classList.add("activetab");
   tab3.classList.remove("activetab");
   tab4.classList.remove("activetab");
}
function tab3(){
   let tab1 = document.getElementById("tab1")
   let tab2 = document.getElementById("tab2")
   let tab3 = document.getElementById("tab3")
   let tab4 = document.getElementById("tab4")
   tab1.classList.remove("activetab");
   tab2.classList.remove("activetab");
   tab3.classList.add("activetab");
   tab4.classList.remove("activetab");
}
function tab4(){
   let tab1 = document.getElementById("tab1")
   let tab2 = document.getElementById("tab2")
   let tab3 = document.getElementById("tab3")
   let tab4 = document.getElementById("tab4")
   tab1.classList.remove("activetab");
   tab2.classList.remove("activetab");
   tab3.classList.remove("activetab");
   tab4.classList.add("activetab");
}
  

Тогда вам просто нужно выяснить, как отображать разные таблицы (или содержимое таблицы) в зависимости от того, на какой вкладке находится активный класс.

Честно говоря, я даже не знаю, хороший ли это способ создания вкладок. Не возражал бы против обратной связи. На данный момент я пытаюсь решить проблему, похожую на вашу.