Использование вкладок для перехода к различным файлам html (HTML, JavaScript)

Question

Это мой первый раз, когда вы делаете что-то вроде этого.

Скажем, в моем HTML-файл у меня есть что-то вроде

<div class="main_tabs"> 
    <ul class="tabs"> 
     <li id="home_tab"><a href="index.html">Home</a></li> 
     <li id="other_tab"><a href="other.html">Other</a></li> 
    </ul> 
</div> 

Тогда в моем файле JavaScript У меня есть что-то вроде

jQuery(document).ready(function() { 
    jQuery('.main_tabs .tabs a').on('click', function(e) { 
     e.preventDefault(); 
     switch(this.id){ 
      case "home_tab": 
      window.location.href = "index.html"; 
      break; 
      case "other_tab": 
      window.location.href = "other.html"; 
      break; 
     } 
    }); 
}); 

При нажатии вкладки, ничего не происходит. Я попробовал кучу разных вещей, но я не мог заставить его работать. Может ли кто-нибудь помочь мне (кстати, мне нужно, чтобы preventDefault выполнял некоторые другие функции в функции, поэтому мне нужно вручную изменить страницу)?

Answer 1

Вам необходимо получить id или родительский li, так как знак a не имеет атрибута id.

jQuery(document).ready(function() { 
 
    jQuery('.main_tabs .tabs a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    switch (this.parentNode.id) { 
 
    // -----^-- get parent node and it's id 
 
     case "home_tab": 
 
     window.location.href = "index.html"; 
 
     break; 
 
     case "other_tab": 
 
     window.location.href = "other.html"; 
 
     break; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="main_tabs"> 
 
    <ul class="tabs"> 
 
    <li id="home_tab"><a href="index.html">Home</a> 
 
    </li> 
 
    <li id="other_tab"><a href="other.html">Other</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

Вы можете удалить JQuery, так как вы уже используете якорь в HTML. См. http://www.w3schools.com/html/html_links.asp.