2013-04-03 4 views
0

Я надеюсь, что кто-то может ответить на мой вопрос, это, вероятно, легко для вас, но я не очень привык к JavaScript.Наведите указатель мыши на getElementById

Так что я сделал меню, используя этот код:

function tabSwitch(new_tab, new_content) { 

    document.getElementById('content_1').style.display = 'none'; 
    document.getElementById('content_2').style.display = 'none'; 
    document.getElementById('content_3').style.display = 'none';   
    document.getElementById(new_content).style.display = 'block';  

    document.getElementById('tab_1').className = ''; 
    document.getElementById('tab_2').className = ''; 
    document.getElementById('tab_3').className = '';   
    document.getElementById(new_tab).className = 'active';   

} 

При нажатии на область tab_1content_1 отображается и так далее. Но я хотел бы получить содержимое, отображаемое, когда мышь нависает над областью разных вкладок. Не могли бы вы помочь мне, я посмотрел в Интернете, но ничего не нашел, может быть, потому, что на самом деле я понятия не имею о JavaScript.

Итак, спасибо за ваше время и помощь.

EDIT:

Это где называется TabSwitch ... Я надеюсь, что так

<ul class="tabs"> 
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active"><img src="img/flash.png" /></a></li> 
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2"><img src="img/brush.png" /></a></li> 
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3"><img src="img/wheel.png" /></a></li> 
</ul> 
+0

jQuery делает это проще – NimChimpsky

+0

Можете ли вы показать код, где вызывается 'tabSwitch'? –

ответ

0

Вы могли бы пойти на onmouseover событие, так как она поддерживается в течение и Ли тегов как ну и дополнительно проверьте onmouseout (очень похоже), чтобы быть в курсе обоих.

С этим, литий-теги для элементов меню будет выглядеть так:

<li onmouseover="tabSwitch('tab_1', 'content_1');"><a href="#" id="tab_1" class="active"><img src="img/flash.png" /></a></li> 
<li onmouseover="tabSwitch('tab_2', 'content_2');"><a href="#" id="tab_2"><img src="img/brush.png" /></a></li> 

OnMouseOver сгорит, при наведении курсора на элемент. Думаю, вы поняли эту идею.

+0

Что такое ярлык 'javascript:'? – Bergi

+0

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

+0

У него был 'javascript:' -link (в атрибуте href), в то время как у вас есть код встроенного обработчика. Убери это. – Bergi

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