通過隱藏在網頁上的鏈接（可訪問性問題）選項卡

我有一個包含3個鏈接的網頁。 1個鏈接被顯示爲無的父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>

來源

2010-08-05 Abadaba

看到您的標記和CSS將有助於回答您的問題。 – Oded 2010-08-05 06:13:43

使用JavaScript。

將onfocus和onblur處理程序添加到在父div上切換類的錨點。編輯樣式表以在類設置時顯示它。

還添加一個標誌以指示JS存在，例如，

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

...和保護，隱藏在body.js首位，隨後後代選擇器的div規則（所以非JS的用戶仍然可以訪問該內容）。

來源

2010-08-05 06:15:15 Quentin

onfocus永遠不會爲主播發火.... – Abadaba 2010-08-05 06:23:38

顯示：沒有內容超出製表順序？我必須承認沒有對它進行測試。在這一點上，你也必須從'display：none'切換到'position：absolute;左：-1000px;'或類似。 – Quentin 2010-08-05 06:34:12

至少當你把rtl作爲html的dir屬性時，ie6中似乎有一個bug，由於隱藏div的負偏移，會出現一個巨大的水平滾動條。有任何解決這個問題的方法嗎？ – Abadaba 2010-08-05 07:06:40

通過隱藏在網頁上的鏈接（可訪問性問題）選項卡

回答

相關問題