Есть ли более простой способ написать этот код?

Question

Этот код предназначен для отображения разделов = нет / блокировки по клику, есть более простой способ написать его, чтобы он был проще и меньше строк кода.

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

HTML

js

 <script>
    function video() {
      var main    = document.getElementById("main");
      var video   = document.getElementById("video");
      var contact = document.getElementById("contact");
      var work    = document.getElementById("work");
      var blog    = document.getElementById("blog");
      if (
        video.style.display   === "none") {
        main.style.display    = "none";
        video.style.display   = "block";
        contact.style.display = "none";
        work.style.display    = "none";
        blog.style.display    = "none";
      } else {
        video.style.display   = "none";
      }
    }
    function contact() {
      var main    = document.getElementById("main");
      var video   = document.getElementById("video");
      var contact = document.getElementById("contact");
      var work    = document.getElementById("work");
      var blog    = document.getElementById("blog");
      if (
        contact.style.display   === "none") {
        main.style.display    = "none";
        video.style.display   = "none";
        contact.style.display = "block";
        work.style.display    = "none";
        blog.style.display    = "none";
      } else {
        contact.style.display   = "none";
      }
    }
    function work() {
      var main    = document.getElementById("main");
      var video   = document.getElementById("video");
      var contact = document.getElementById("contact");
      var work    = document.getElementById("work");
      var blog    = document.getElementById("blog");
      if (
        work.style.display   === "none") {
        main.style.display    = "none";
        video.style.display   = "none";
        contact.style.display = "none";
        work.style.display    = "block";
        blog.style.display    = "none";
      } else {
        work.style.display   = "none";
      }
    }
    function blog() {
      var main    = document.getElementById("main");
      var video   = document.getElementById("video");
      var contact = document.getElementById("contact");
      var work    = document.getElementById("work");
      var blog    = document.getElementById("blog");
      if (
        blog.style.display   === "none") {
        main.style.display    = "none";
        video.style.display   = "none";
        contact.style.display = "none";
        work.style.display    = "none";
        blog.style.display    = "block";
      } else {
        blog.style.display   = "none";
      }
    }

Answer 1

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

NB: Я только что написал это здесь, я не проверял, есть ли в нем ошибки. Я проверю, но это должно работать. 100 %.

Ваш стиль

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

Ваш HTML

<nav>
    <a class="link-item" id="contact">Contact</a>
    <a class="link-item" id="work">Work</a>
    <a class="link-item" id="blog">Blog</a>
</nav>

<span  class="contact item">Put your video here</span>
<span  class="work item">Your work content here</span>
<span  class="blog item">Your blog content here</span>

Jquery

$(function()
{
    $(".link-item").click(function(e)
    {
        var targetClassName = $(this).attr('id')  //get the id of the clicked item so that you can
                                                  //display it later
        $(".item").hide(function(e)  //hide all item
        {
            $("."+targetClassName).show()   //on callback display the item which was clicked using its classname
        }
    }
}

Отказ от ответственности: я сделал это с помощью JQuery вы можете конвертировать Jquery в Javascript. Ваш вопрос был по Javascript, поэтому вы можете захотеть JQuery или просто сделать это с вами Javascript, но он должен дать вам те же результаты, которые я предпочитаю JQuery (Javascript библиотека), он меньше и, следовательно, легко отлаживаемый. Но если вы хотите JS комментарий, я могу сделать это с Javascript

Answer 2

Просто напишите обобщенную c функцию, которая принимает имя раздела в качестве параметра, а затем вычислите ваш style.display.