2013-09-05 3 views
0

На тестовой странице у меня есть, есть ссылка, как так:делает javascript удалить прослушиватели событий?

<a href="default.html?tab=1" id="t1" onclick="switchf('home',this)">HOME</a> 

Стиль для него это так:

nav > a { 
    text-decoration: none; 
    color: #0000aa; 
    display: inline-block; 
     width: 80px; 
    padding: 0 10px; 
} 
nav > a:hover { 
    background-color: #eeeeee; 
} 

и switchf() (поле переключателя), как так:

function switchf(field,tab) {  
    document.getElementById("home").style.display = "none"; 
    document.getElementById("about").style.display = "none"; 
    document.getElementById("account").style.display = "none"; 
    document.getElementById("contact").style.display = "none"; 

    document.getElementById("t1").style.backgroundColor = "#dddddd"; 
    document.getElementById("t2").style.backgroundColor = "#dddddd"; 
    document.getElementById("t3").style.backgroundColor = "#dddddd"; 
     document.getElementById("t4").style.backgroundColor = "#dddddd"; 

    document.getElementById(field).style.display = "inline-block"; 
    tab.style.backgroundColor = "#cccccc"; 
} 

Ссылка в основном действует как вкладка, чтобы показать другую вещь. Это еще три человека.

В JavaScript работают мелкие переключающие вкладки, но когда я наводил курсор на вкладку после того, как я использовал switchf(), она больше не меняет цвет.

С кодом нет в коде?

спасибо.

EDIT

это, как я установил мину:

первый, я добавил class="tab" ко всем ссылкам, чтобы они выглядели так:

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

секунду, я изменил javascript, чтобы функция switchf() была такой:

function switchf(field,tab) {  
    document.getElementById("home").style.display = "none"; 
    document.getElementById("about").style.display = "none"; 
    document.getElementById("account").style.display = "none"; 
    document.getElementById("contact").style.display = "none"; 

    var t = document.getElementsByClassName("tag"); // here is different 
    for(var i = 0; i < t.length; i++) { 
     t[i].style.backgroundColor = "#dddddd"; 
     t[i].addEventListener("mouseover"); 
     t[i].addEventListener("mouseout"); 
    } 

    document.getElementById(field).style.display = "inline-block"; 
    tab.style.backgroundColor = "#cccccc"; 
} 

и он работал.

+0

Как это имеет какое-либо отношение к слушателю событий? У вас нет слушателя для событий мыши здесь, правильно? Просто нажмите. – Pointy

+0

Я имел в виду 'hover', в css –

+0

@Jon Нет необходимости редактировать ваш вопрос, чтобы добавить« спасибо, он решен ». Отметить ответ как «принято» достаточно. Удачи вам в совершенствовании новейших веб-технологий! – Lekensteyn

ответ

8

Inline CSS имеет преимущество перед таблицами стилей. Как только вы нажмете на ссылку, она установит свойство background-color для всех ссылок, поэтому все ссылки не изменят цвет, когда вы наведите курсор мыши на него.

Лучшая альтернатива, чем жесткое кодирование стиля в ваших элементах, вы можете попробовать добавить класс CSS к своим ссылкам (например, page-active) и при необходимости стилизовать эти элементы.

Еще одна альтернатива, которая избавляет вас от очистки старых классов, - это добавление класса или идентификатора на страницу и использование этого для скрытия/отображения ссылок по мере необходимости.

<style> 
nav > a { 
    display: none; 
} 
#page-about nav > a#link-home { 
    display: inline-block; 
} 
<body id="page-about"> 
    <nav> 
     <a href="?tab=home" id="link-home">Home</a> 
     <a href="?tab=about" id="link-about">About</a> 
    </nav> 
</body> 

Это должно дать вам общее представление, полировка - это упражнение для читателя.

+5

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

+0

, но не следует ли устанавливать только свойство «background-color», когда оно не зависнет? почему он должен изменить свойство «background-color» для того, когда он зависнет? –

+0

, так что вы знаете, есть ли способ установить свойство «background-color» только для 'a', а не' a: hover'? –

Смежные вопросы