Переход по ссылкам, которые скрыты на веб-странице (проблема доступности) - PullRequest
Новая
       9

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

0 голосов
/ 05 августа 2010

У меня есть веб-страница с 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>

1 Ответ

0 голосов
/ 05 августа 2010

Использовать JavaScript.

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...