Question

此代码旨在使这些部分显示=无/阻止onclick，是否有更容易的编写方式，因此它更简单，代码行也更少。

我觉得不需要每个链接每次都重写它，并且应该有一种方法可以让1个脚本与整个导航栏一起使用。

HTML

application.js

js

  <header>
      <img onclick="video()" id="logo" src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587122319/Icons/logo-no-text_yyug8o.svg" alt="Mac Logo" style="width: 10vw;" />
      <nav>
        <a onclick="contact()">Contact</a>
        <a onclick="work()">Work</a>
        <a onclick="blog()">Blog</a>
      </nav>
    </header>
    <main>
      <section id="main" style="display: block;">
        <h1>Mac Hooper</h1>
        <p><strong>Developer.</strong><br> Progressive, modern web development.</p>
      </section>
      <section id="contact" style="display: none;">
        <a href="mailto:macdevh@gmail.com">macdevh@gmail.com</a>
        <div id="social">
          <a href="https://instagram.com/machooper"><img src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587129314/Icons/insta_maq9f2.svg" alt="Instagram Logo"></a>
          <a href="https://twitter.com/mac_hooper"><img src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587129314/Icons/glab_jumort.svg" alt="Twitter Logo"></a>
          <a href="https://gitlab.com/macdevh"><img src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587129314/Icons/twit_t57gos.svg" alt="Gitlab Logo"></a>
        </div>
      </section>
      <section id="work" style="display: none;">
      <div class="container">
        <a href="https://lucycull.design" target="_blank" rel="noopener"><div class="card">
          <img id="work-img" src="https://res.cloudinary.com/dnrojsaks/image/upload/v1587134668/Portfolio/lucy_ijnjoq.jpg" />
          <h2>Lucy Cull</p>
        </div></a>
      </div>
      </section>
      <section id="blog" style="display: none;">
      <div class="container">
        <a href="https://medium.com/@machooper_69036/make-vscode-yours-e362dab48ff6" target="_blank" rel="noopener"><div class="card">
            <img src="https://miro.medium.com/max/600/0*ZdpEvxpU6_SFxDzT.gif" />
            <h2>Make VSCode Yours</p>
        </div></a>
        <a href="https://medium.com/@machooper_69036/my-setup-the-desk-5f4ed6824192" target="_blank" rel="noopener"><div class="card">
          <img src="https://miro.medium.com/max/700/1*PFXyIbHjkQE-tGzlj6xMEA@2x.jpeg" />
          <h2>My Desk</p>
        </div></a>
        <a href="https://medium.com/@machooper_69036/my-current-tech-stack-10-04-2020-143feae97983" target="_blank" rel="noopener"></a><div class="card">
          <img src="https://miro.medium.com/max/1400/1*qXN9PuwTmiHueFoeskJZnw.jpeg" />
          <h2>My Tech Stack</p>
        </a></div>
        <a href="https://medium.com/@machooper_69036/my-home-setup-the-computer-a6e67eb00e80" target="_blank" rel="noopener"></a><div class="card">
          <img src="https://miro.medium.com/max/700/1*PFXyIbHjkQE-tGzlj6xMEA@2x.jpeg" />
          <h2>My Computer</p>
        </div></a>
      </div>
      </section>
      <section id="video" style="display:none;">
        <video autoplay loop muted src="https://res.cloudinary.com/dnrojsaks/video/upload/v1587133353/Video/assets_img_header_bxtgiz.mp4"></video>
      </section>
    </main>

Answer 1

只需编写一个以section-name作为参数的通用函数，然后计算您的style.display。

Answer 2

在这种情况下，我总是会结合使用类和Id。是的，我知道也许有人有更好的方法，但这对我来说总是更容易。

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

有没有更简单的方法来编写此代码？

2 个答案: