Как более эффективно управлять html событиями нажатия кнопок?

Question

Выглядит нелепо выполнять столько задач одним нажатием кнопки, в то время как каждая кнопка должна иметь свои собственные события:

 function allStories() {
     $('#zero-md').hide();
     $('.container-aboutme').hide();
     $('.container-allstories').show();
     $('.container-allstories').load("pages/allstories.html");
     $("#home").removeClass("nav-link active").addClass("nav-link");
     $("#aboutme").removeClass("nav-link active").addClass("nav-link");
     $("#allposts").removeClass("nav-link").addClass("nav-link active");
 }

 function aboutMe() {
     $('#zero-md').hide();
     $('.container-allstories').hide();
     $('.container-aboutme').show();
     $('.container-aboutme').load("pages/about.html");
     $("#home").removeClass("nav-link active").addClass("nav-link");
     $("#allposts").removeClass("nav-link active").addClass("nav-link");
     $("#aboutme").removeClass("nav-link").addClass("nav-link active");
 }

     <li class="nav-item">
         <a class="nav-link" id="allposts" onclick="allStories()" href="#">All posts</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" id="aboutme" onclick="aboutMe()" href="#">About me</a>
     </li>

Существует ли лучший, более эффективный способ организации таких событий с меньшим количеством кода?

Answer 1

Да. Постарайтесь сохранить свой код DRY (не повторяйте себя).

Добавьте прослушиватель событий в ваш JS.
Используйте e.target, чтобы определить, что было нажато.
Создайте цепочку команды вместе, когда они работают с одними и теми же элементами.
Не удаляйте класс, а затем добавьте тот же класс обратно. Просто удалите тот, от которого вы хотите избавиться.

Я добавил несколько подставок в элементах, так как не все присутствовало в вашем HTML.

$('.nav-link').click( (e)=>{
  let theLink = $(e.target).attr('id');
  const container = '.container-'+$(theLink).attr('id');
  $('#zero-md').hide();
  $('.container').hide();
  $(container).show().load("pages/"+theLink+".html");
  alert('loading: pages/'+theLink+'.html');
  $("#home").removeClass("nav-link active").addClass("nav-link");
  $(".nav-link").removeClass("active");
  $("#"+theLink).addClass("active");
});

.active {
  font-size: 1.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
  <a class="nav-link" id="allstories" href="#">All posts</a>
</li>
<li class="nav-item">
  <a class="nav-link" id="aboutme" href="#">About me</a>
</li>
<div class="container container-allstories">All Stories</div>
<div class="container container-aboutme">About Me</div>
<div id="zero-md">Zero MD</div>

Answer 2

Вы имеете в виду это

$("#nav").on("click",".nav-link",function(e) {
  e.preventDefault(); // stop the link
  const id = this.id;
  const $thisContainer = $('.container'+id);

  $('#zero-md').hide();
  $('.container').hide(); // hide all containers
  $thisContainer.load("pages/"+id+".html",function() { // perhaps not load if already loaded
    $thisContainer.fadeIn("slow");
  }) ;
  $(".nav-link").removeClass("active")
  $(this).addClass("active")
})

<ul id="nav">
  <li class="nav-item">
    <a class="nav-link" id="allposts" href="#">All posts</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="about" href="#">About me</a>
  </li>
</ul>