在頁面（散列）鏈接中，獲取第一個可見元素

我有一個局部視圖（handlebars html模板），它具有用於桌面和一塊移動設備的html片段。我只是用不同的CSS類隱藏它。在頁面（散列）鏈接中，獲取第一個可見元素

<div class='hideOnMobile showOnDesktop'> 
    <a name='manuals' href='#'>Manuals</a> 
    <!-- Extra html for Desktop presentations --> 
</div> 
<div class='hideOnDesktop showOnMobile'> 
    <a name='manuals' href='#'>Manuals</a> 
    <!-- Extra html for Mobile presentations --> 
</div>

我的CSS的重要的部分基本上是隱藏和使用媒體查詢表示的元素：

@media only screen and (min-width: 420px) { 
    .showOnMobile { display: block; } 
    .hideOnMobile { display: none; } 
} 
@media only screen and (min-width: 1050px) { 
    .showOnDesktop { display: block; } 
    .hideOnDesktop { display: none; } 
}

CSS被安裝以供參考。 CSS實際上按預期工作。問題是：

當瀏覽器收到http://example.org/page.html#manuals特定頁面的URL，我想直接導航到第一個可見<a>元素的文檔。無論如何，我無法與第一個可見元素建立深層聯繫。我讀過這裏有一些限制，但我想知道是否有解決辦法，或者我擁有的唯一選擇是使用javascript（我試圖避免）模擬深層鏈接。非常感謝

來源

2016-12-22 David Espino

更好的是你只設置了一個類。像class =「extradiv」並在css中設置display：block。之後在javascript中設置添加和刪除類。它效果更好。 – Obink

對不起，我不太明白這個意見，但我的媒體查詢的目的不是不必寫jQuery來顯示和隱藏移動設備上的元素，並且需要在每個頁面上實現「調整大小」......媒體查詢可以自己做... –

也許標記可以改變？

<a name='manuals' id="manuals" href='#manuals'>Manuals</a> 
<div class='hideOnMobile showOnDesktop'> 
    <!-- Extra html for Desktop presentations --> 
</div> 
<div class='hideOnDesktop showOnMobile'> 
    <!-- Extra html for Mobile presentations --> 
</div>

這樣，無論環境如何，哈希（#manuals）的目標始終可見。這也使得它更容易維護，因爲你的重複性較低。

來源

2016-12-22 19:39:40 Watty

非常感謝答案...我已經考慮過html重新設計，但是結構並不像這個層次結構的例子那麼簡單...所以我想知道是否有一種原生的方式，用於在＃任何激烈的措施之前導航到第一個可見元素的＃個鏈接 –

在頁面（散列）鏈接中，獲取第一個可見元素

回答

相關問題