Перемещение по ссылкам, скрытым на веб-странице (проблема доступности)

У меня есть веб-страница с 3 ссылками. 1 из ссылок скрывается родительским div, который имеет отображение: none. Однако, когда я нахожусь над другим div, скрытый div будет показан, показывая связь. Как я могу перечислить все 3 ссылки и получить ссылку 3 для автоматического отображения, когда я на нее нажимаю?Перемещение по ссылкам, скрытым на веб-странице (проблема доступности)

<html> 
<head> 
    <title>Skype Home</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
    <style> 
    a,.hoverMe{ 
    display:block; 
    width:50px; 
    height:50px; 
    margin-bottom:10px; 
    background-color:#CCC; 
    } 
    .hoverMe{ 
    background-color:pink; 
    width:100px; 
    height:50px; 
    } 
    .hiddenDiv{ 
    visibility:hidden; 
    } 
    .hiddenDiv.shown{ 
    visibility:visible; 
    } 
    </style> 
    <script> 
    $(document).ready(
    function(){ 
    $(".hoverMe").hover(
    function(){ 
     $(".hiddenDiv").addClass("shown"); 
    }, 
    function(){ 
     $(".hiddenDiv").removeClass("shown"); 
    } 
    ) 
    } 
); 
    </script> 
</head> 
<body> 
    <a href="#1">Link 1</a> 
    <a href="#2">Link 2</a> 
    <div class="hoverMe">hover me to open Link 3</div> 
    <div class="hiddenDiv"> 
    <a href="#3">Link 3</a> 
    </div> 
</body> 
</html>

источник

2010-08-05 Abadaba

Видя вашу разметку и CSS, вы сможете ответить на свой вопрос. – Oded

Используйте JavaScript.

Добавить onfocus и onblur обработчик к якорю, который переключает класс на родительский div. Измените таблицу стилей, чтобы открыть ее, когда класс установлен.

Также добавлен флаг, указывающий, что присутствует JS, например.

<body> 
<script type="text/javascript"> 
document.body.className += " js"; 
</script>

... и защитить правило, скрывающую DIV в первую очередь с body.js последующим селектором потомка (пользователи так без JS будет по-прежнему иметь возможность получить доступ к содержимому).

источник

2010-08-05 06:15:15 Quentin

Onfocus никогда не срабатывает для якоря .... – Abadaba

дисплей: нет содержимого из списка вкладок? Я должен признаться, что не проверил его. В этом вы также должны перейти от 'display: none' к' position: absolute; left: -1000px; 'или подобное. – Quentin

Кажется, что ошибка в ie6 по крайней мере, когда вы поместите rtl в качестве атрибута dir для html, появится гигантская горизонтальная полоса прокрутки из-за отрицательного смещения скрытого div. В любом случае, чтобы исправить это? – Abadaba

Перемещение по ссылкам, скрытым на веб-странице (проблема доступности)

ответ

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