html - 制表符导致溢出内容上移

我有一个定义了高度和溢出设置为隐藏的 div。如果溢出内容中有 anchor ，div 的可见内容将向上移动，这意味着我要显示的内容将被推离 div 的顶部， anchor 将移动到 div 可见部分的中心.没有显示滚动条(一件好事)所以内容有点卡在那里。

HTML

<div class="container">
    <div class="show-content">Click in the box and hit tab</div>
    <div class="overflow-content">
        <a href="javascript:void(0);">Pesky Link</a>
        <a href="javascript:void(0);">Pesky Link 2</a>
    </div>
</div>

CSS

.container{
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
}
.show-content{
    line-height: 100px;
    height: 100px;
    font-size: 16px;
}
.overflow-content a{
    display: block;
    margin-top: 40px;
    line-height: 20px;
    font-size: 16px;
}

这是 fiddle 。在框内单击并点击选项卡以了解我的意思
http://jsfiddle.net/2seLJ/1/

我的用例是我有一个带有链接的下拉菜单，我只想在用户单击“显示下拉列表”时显示这些链接。可见内容有一个输入框，所以如果用户从输入框中选择标签，链接就会显示出来，并且没有办法回到输入框而不是通过整个页面进行跳转。这只能通过向所有链接添加 tabindex="-1"来解决吗？

最佳答案

听起来您想阻止该 anchor 上的制表位行为。看到这个:Prevent tabstop on A element (anchor link) in HTML

<div class="container">
    <div class="show-content">Click in the box and hit tab</div>
    <div class="overflow-content">
        <a href="javascript:void(0);" tabindex="-1">Pesky Link</a>
        <a href="javascript:void(0);" tabindex="-1">Pesky Link 2</a>
    </div>
</div>

fiddle :http://jsfiddle.net/2seLJ/2/

或者

您可以使用 jQuery 以编程方式为“溢出内容”div 中的所有链接执行此操作:

$(document).ready(function(){
    $('div.overflow-content a').attr('tabindex', '-1');
});

fiddle :http://jsfiddle.net/2seLJ/3/

关于html - 制表符导致溢出内容上移，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18520956/