瀏覽網頁上隱藏的鏈接（可訪問性問題）

Question

我有一個包含3個鏈接的網頁。 鏈接1被顯示為：none的父div隱藏。 但是，當我將鼠標懸停在另一個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>

Answer 1

使用JavaScript。

向錨點添加onfocus和onblur處理函數，以在父div上切換類。 編輯您的樣式表以在設置類后顯示它。

還添加一個標志來指示JS存在，例如

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

…並使用body.js和后代選擇器保護首先隱藏div的規則（這樣，非JS用戶仍然可以訪問內容）。

瀏覽網頁上隱藏的鏈接（可訪問性問題）

問題描述

1 個解決方案

解決方案1
0 已采納 2010-08-05 06:15:15

瀏覽網頁上隱藏的鏈接（可訪問性問題）

問題描述

1 個解決方案

解決方案1 0 已采納 2010-08-05 06:15:15

解決方案1
0 已采納 2010-08-05 06:15:15