Изменение вкладок при нажатии кнопки

Question

В настоящее время я использую руководство по следующей ссылке, чтобы определить, как создавать вкладки (http://www.w3schools.com/howto/howto_js_tabs.asp).

 function openTab(evt, tabName) { 
     var i, tabcontent, tablinks; 
     tabcontent = document.getElementsByClassName("tabcontent"); 
     for (i = 0; i < tabcontent.length; i++) { 
      tabcontent[i].style.display = "none"; 
     } 
     tablinks = document.getElementsByClassName("tablinks"); 
     for (i = 0; i < tablinks.length; i++) { 
      tablinks[i].className = tablinks[i].className.replace(" active", ""); 
     } 
     document.getElementById(tabName).style.display = "block"; 
     evt.currentTarget.className += " active"; 
    } 

    // Get the element with id="defaultOpen" and click on it 
    document.getElementById("defaultOpen").click(); 

Я хочу изменить вкладку, отображаемую при нажатии кнопки. Поэтому в коде EventListener в JavaScript:

 document.getElementById("btn_click").addEventListener("click", function() { 
      openTab("click", "tab2"); 
    } 

Это дает мне, что «щелчок», как ЭВТ не определено. Поблагодарю любую помощь в том, как определить параметр evt для изменения вкладок при нажатии кнопки (предпочтительным будет javascript soln).

Answer 1

Вам необходимо пройти фактическое событие щелчка так:

document.getElementById("btn_click").addEventListener("click", function(e){ 
    openTab(e, "tab2"); 
}) 

Кроме того, как общее правило: старайтесь избегать w3schools является чумой. Качество в целом очень низкое. Лучше всего просто искать stackoverflow для решения конкретных вопросов и использовать mozilla для ссылки на все связанные с DOM вещи.

Answer 2

Вы, как говорится на веб-сайте w3schools, просто должны запустить этот код при нажатии кнопки.

function openCity(evt, cityName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

Вот как HTML и JS: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

Надеется, что это помогает!