Передача «этого» в качестве аргумента

Question

Я довольно новый веб-разработчик, изучающий html5 и javascript.

У меня есть веб-страница с вкладками, которые заставляют части веб-страницы исчезать и снова появляться.

Звенья, как это:

<a href="?tab=1" id="t1" class="tab" onclick="switchf('Home',this)">HOME</a> 

и Javascript функция switchf() как это:

function switchf(field,tab) { 
    var divs = ["Home","About","Chatroom","Account","Contact","Signup"]; 
    for(var j = 0; j < divs.length; j++) { 
     if(field != divs[j]) 
      document.getElementById(divs[j]).style.display = "none"; 
     else 
      document.getElementById(divs[j]).style.display = "block"; 
    } 

    var t = document.getElementsByClassName("tab"); 
    for(var i = 0; i < t.length; i++) { 
     t[i].style.backgroundColor = "#dddddd"; 
    } 

    tab.style.backgroundColor = "#cccccc"; 
    document.getElementsByTagName("title")[0].innerHTML = field; 
} 

Он принимает два аргумента - часть страницы, чтобы появиться и вкладка, которая была нажат.

Он перемещается по частям страницы и изменяет их все на display="none", затем переходит на все вкладки и изменяет их на backgroundColor="#dddddd".

Затем он выбирает правильную вкладку, чтобы изменить цвет и отобразить правую часть страницы.

Однако, когда я прохожу this в качестве аргумента (onclick="switchf('Home',this)"), он не меняет цвет (tab.style.backgroundColor = "#cccccc";).

Это правильный способ пройти this в качестве аргумента? Я решил, что это будет самый простой способ, но я никогда не использовал его в js раньше, и в этом примере это не работает.

Как и все мои другие ошибки, это, вероятно, очень простой, но, пожалуйста, укажите его мне.

Спасибо.

Answer 1

Проблема заключается в том, что вы следуете href, который обновляет страницу. Добавьте return false к встроенному обработчику, чтобы предотвратить это.

<a href="?tab=1" id="t1" class="tab" onclick="switchf('Home',this); return false;">HOME</a> 

---

Или просто добавьте return перед вызовом функции, а затем return false внутри функции.

<a href="?tab=1" id="t1" class="tab" onclick="return switchf('Home',this);">HOME</a> 

function switchf(field,tab) { 
    var divs = ["Home","About","Chatroom","Account","Contact","Signup"]; 
    for(var j = 0; j < divs.length; j++) { 
     if(field != divs[j]) 
      document.getElementById(divs[j]).style.display = "none"; 
     else 
      document.getElementById(divs[j]).style.display = "block"; 
    } 

    var t = document.getElementsByClassName("tab"); 
    for(var i = 0; i < t.length; i++) { 
     t[i].style.backgroundColor = "#dddddd"; 
    } 

    tab.style.backgroundColor = "#cccccc"; 
    document.getElementsByTagName("title")[0].innerHTML = field; 

    return false; 
} 

Answer 2

В вашей ситуации this относится к объекту, который содержит атрибут обработчика события.

this является одной из наиболее полезных функций JavaScript, и использование его в порядке, указанном в вашем вопросе, является именно тем, для чего он был предназначен. Другая функция, выполняемая обработчиком события, может тем самым получить объект как один из его аргументов.

Я просматриваю ваш код, чтобы узнать, что еще может быть с ним.

Обновление: Ваш обработчик событий не останавливает связь с отправкой, а это означает, что ваша страница будет перезагружена с указанной вами строкой запроса.

У вас есть два варианта: теперь

1. возврата false в обработчике события, чтобы предотвратить связь от соблюдаются и страница обновилась. Как это: onclick="switchf('Home',this); return false;"

2. позволяет ссылке следовать и изменить обработчик событий для строки запроса парсера, который изменяет активную вкладку на основе текущей строки запроса. (Это решение было бы предпочтительным, поскольку он позволит посетителям просматривать вкладки определенную непосредственно из внешней ссылке без необходимости следовать по ссылке на ваш сайт, а затем вторично нажмите на вкладку определенной.)

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

http://jsfiddle.net/cookies/4JPJA/2/