Javascript-форум - Самый простой код табов

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Самый простой код табов (https://javascript.ru/forum/misc/66662-samyjj-prostojj-kod-tabov.html)

Самый простой код табов

Существует ли js код ещё проще, чем этот?

<!DOCTYPE html>
<html>

  <head>
    <style>
      span{
        display: inline-block;
        margin-right: 10px;
      }
      
      .content{
        width: 130px;
      }
      
      .none{
        display: none;
      }
	</style>
  </head>

  <body>
    	<span class='tab'>Tab1</span>
  <span class='tab'>Tab2</span>
  <span class='tab'>Tab3</span>

<div class="content">
  <div class="c">aaaa a aaaaa  aaaaaa a a a a aaaaaa  aaaaaa aaaaa</div>
  <div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
  <div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>

<script>
  var tabs = document.querySelectorAll('.tab')
var con = document.querySelectorAll('.c')

for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function(e) {
    for (var k = 0; k < tabs.length; k++) {
      if (this == tabs[k]) {
        con[k].classList.remove('none');
      } else {
        con[k].classList.add('none');
      }
    }
  })
}
</script>
  </body>

</html>

DivMan,

<!DOCTYPE html>
<html>

  <head>
    <style>
      span{
        display: inline-block;
        margin-right: 10px;
      }

      .content{
        width: 130px;
      }

      .none{
        display: none;
      }
  </style>
  </head>

  <body>
    	<span class='tab'>Tab1</span>
  <span class='tab'>Tab2</span>
  <span class='tab'>Tab3</span>

<div class="content">
  <div class="c">aaaa a aaaaa  aaaaaa a a a a aaaaaa  aaaaaa aaaaa</div>
  <div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
  <div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>

<script>
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = con[0];
[].forEach.call(tabs, function(item, i) {
    item.addEventListener("click", function() {
        temp.classList.add("none");
        temp = con[i];
        temp.classList.remove("none")
    })
});
</script>
  </body>

</html>

А зачем использовать call, если без него работает?

<!DOCTYPE html>
<html>

  <head>
    <style>
      span{
        display: inline-block;
        margin-right: 10px;
      }

      .content{
        width: 130px;
      }

      .none{
        display: none;
      }
  </style>
  </head>

  <body>
    	<span class='tab'>Tab1</span>
  <span class='tab'>Tab2</span>
  <span class='tab'>Tab3</span>

<div class="content">
  <div class="c">aaaa a aaaaa  aaaaaa a a a a aaaaaa  aaaaaa aaaaa</div>
  <div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
  <div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>

<script>
var tabs = document.querySelectorAll(".tab");
var con = document.querySelectorAll(".c");
var temp = con[0];

tabs.forEach(function(item,i){
	item.addEventListener("click", function() {
        temp.classList.add("none");
        temp = con[i];
        temp.classList.remove("none")
    })
})
</script>
  </body>

</html>

Цитата:

Сообщение от DivMan

А зачем использовать call, если без него работает?

не везде ещё

Цитата:

Сообщение от рони (Сообщение 439391)

не везде ещё

Но в этом же примере работает

Как вариант, можно вручную указать каким контентом управляет таб, тогда достаточно одного обработчика. Прятать предыдущий можно по селектору.

<!DOCTYPE html>
<html>
 
  <head>
    <style>
      span{
        display: inline-block;
        margin-right: 10px;
      }
 
      .content{
        width: 130px;
      }
 
      .none{
        display: none;
      }
  </style>
  </head>
 
  <body>
  <div class="tabs">
     <span class='tab' data-content="0">Tab1</span>
     <span class='tab' data-content="1">Tab2</span>
     <span class='tab' data-content="2">Tab3</span>
  </div> 
 
  <div class="content">
    <div class="c">aaaa a aaaaa  aaaaaa a a a a aaaaaa  aaaaaa aaaaa</div>
    <div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
    <div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
  </div>
 
<script>
var contentWrap = document.querySelector(".content");
var content = document.querySelectorAll(".c");
var tabs = document.querySelector(".tabs");
tabs.addEventListener( "click", function(e) {
  contentWrap.querySelector( "div:not(.none)" ).classList.add("none")
  content[ e.target.getAttribute("data-content") ].classList.remove("none")
} )
</script>
  </body>
 
</html>

Попробовал на планшета и без call не работает

Цитата:

Сообщение от DivMan

Попробовал на планшета и без call не работает

браузеры обычно проверяют, а не железо.