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 div，并且用户使用带有＃参数的各种网址，我怎么说只关注下一个可用的div

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>

我不得不承认我去了，写了一个我认为你想要滚动的答案（因为你提到了＃＆＃39; 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

1 个答案: