关注下一个可用的 div

Question

假设我有这个：

<div id="div 2">
<a href="http://www.sitename.com">Link 2</a>
</div

</br></br></br></br></br></br></br></br></br>
<div id="div 1">
<a href="http://www.sitename.com/example">Link 1</a>
</div>

然后我使用#url来到这个页面例如example.com/#div 1

如何设置焦点使其转到相应的第一个 div 而不必将焦点分配给 div。

例如，如果我在 1 个站点上有 x50 divs 并且用户使用带有 # 参数的各种 urls 我怎么简单地说 focus on next div available

Answer 1

您可以使用 tabindex 来做到这一点，例如

<div id="div 2" tabindex='1'>
<a href="http://www.sitename.com">Link 2</a>
</div

</br></br></br></br></br></br></br></br></br>
<div id="div 1" tabindex='2'>
<a href="http://www.sitename.com/example">Link 1</a>
</div>

我不得不承认我去写了一个我认为你想要的答案，它是滚动的（因为你提到了#'s）以防它对你或任何人有用，就在这里。

<input type='button' value='next' onclick='scrollToNextDiv()' style='position:fixed; right:50px;'/>

    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
    <div id="div-2" tabindex='1'>
    <a href="http://www.sitename.com">Link 2</a>
    </div

    </br></br></br></br></br></br></br></br></br>
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
    <div id="div-1" tabindex='2'>
    <a href="http://www.sitename.com/example">Link 1</a>
    </div>
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

<script>
function scrollToNextDiv(){
    //look for #div-X in the URL
    var currentDivId = window.location.hash;
    if(currentDivId.length>0){
        currentDivId = currentDivId.substring(1);//remove leading #
    }

    var divs = document.getElementsByTagName('div');
    if(divs.length===0) {
        return;//nothing to do
    }

    var chosenDiv = divs[0];

    if(currentDivId.length>0){
        //find the current DIV as spec'd by the url #
        for(var i=0; i<divs.length-1; i++){

            if(divs[i].id===currentDivId){
                chosenDiv = divs[i+1];
                break;
            }
            if(i===divs.length-1){
                //didn't find it, or ran out of divs, so go back to top
                chosenDiv = divs[0];
            }
        }

    } 

    chosenDiv.scrollIntoView();
    window.location.hash = '#'+chosenDiv.id;
}
</script>

关注下一个可用的 div

Focus on next available div

html

javascript

focus