Как можно сделать табы [дубликат]

21 ноября 2020, 17:40

На этот вопрос уже даны ответы здесь:

Сделал простые табы на js, хотелось бы услышать критику (2 ответа)

Закрыт 1 год назад.

Скажите как можно сделать табы

Answer 1

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
body {font-family: Arial;} 
 
/* Style the tab */ 
.tab { 
  overflow: hidden; 
  border: 1px solid #ccc; 
  background-color: #f1f1f1; 
} 
 
/* Style the buttons inside the tab */ 
.tab button { 
  background-color: inherit; 
  float: left; 
  border: none; 
  outline: none; 
  cursor: pointer; 
  padding: 14px 16px; 
  transition: 0.3s; 
  font-size: 17px; 
} 
 
/* 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 content */ 
.tabcontent { 
  display: none; 
  padding: 6px 12px; 
  border: 1px solid #ccc; 
  border-top: none; 
} 
</style> 
</head> 
<body> 
 
<h2>Tabs</h2> 
<p>Click on the buttons inside the tabbed menu:</p> 
 
<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> 
 
<div id="London" class="tabcontent"> 
  <h3>London</h3> 
  <p>London is the capital city of England.</p> 
</div> 
 
<div id="Paris" class="tabcontent"> 
  <h3>Paris</h3> 
  <p>Paris is the capital of France.</p>  
</div> 
 
<div id="Tokyo" class="tabcontent"> 
  <h3>Tokyo</h3> 
  <p>Tokyo is the capital of Japan.</p> 
</div> 
 
<script> 
function openCity(evt, cityName) { 
  var i, tabcontent, tablinks; 
  tabcontent = document.getElementsByClassName("tabcontent"); 
  for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
  } 
  tablinks = document.getElementsByClassName("tablinks"); 
  for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
  } 
  document.getElementById(cityName).style.display = "block"; 
  evt.currentTarget.className += " active"; 
} 
</script> 
    
</body> 
</html>

How To Create Tabs

Answer 2

Можно заменить табуляции на что-нибудь, используя управляющий символ \t

const text="Hello,  world"
alert(text.replace("\t","1"))

Далее, для визуального выделения, вместо единицы можно использовать Alt+255, позволяет выделить пустое пространство. Подробнее написано тут. Или заменить на тег, который далее выделять средствами css...