Сфокусируйте вкладку по проблеме Javascript

Question

У меня есть страница HTML, которая имеет 2 вкладки settings1, settings2. Я хочу сфокусировать вкладки в соответствии с tab_id из javascript. Мой код ниже;

HTML

<form action="action_here" method="post" enctype="multipart/form-data" name="form11"> 
    <ul class="tab"> 
     <li><a href="javascript:FormSubmit('1','btn_tab1');" class="tablinks" id="selected_tab1" onclick="openTab(event,'settings1','1');" onfocus="openTab(event,'settings1','1')">settings1</a></li> 
     <li><a href="javascript:FormSubmit('2','btn_tab2');" class="tablinks" id="selected_tab2" onclick="openTab(event,'settings2','2')" onfocus="openTab(event,'settings2','2')">settings2</a></li> 
    </ul> 
    <input type="text" id="tab_id1" name="tab_id" > 
</form> 

Javascript

var tab_id = document.getElementById("tab_id1").value; 
if(tab_id == 1){ 
    alert("1"); 
    document.getElementById('selected_tab1').focus(); 
} else if (tab_id == 2) { 
    alert("2"); 
    document.getElementById('selected_tab2').focus(); 
} 

Вопросы:

1. когда страница загружена первая не выбраны вкладки. Я хочу выбрать вкладку 1 settings1.

2.Когда я выбираю вкладку, вкладка не будет выбрана, а tab_ids будут печататься справа на javascript.

Plaese Помогите мне с этим.

Answer 1

Вы хотите, чтобы ваш код вызывался после того, как ваш контент DOM готов. Если вы не хотите использовать что-то вроде jQuery вы можете сделать что-то вроде этого:

function ready(fn) { 
    if (document.readyState != 'loading'){ 
    fn(); 
    } else { 
    document.addEventListener('DOMContentLoaded', fn); 
    } 
} 

ready(function() { 
    // your code 
}) 

Реализация документа готового был взят из you might not need jquery.