纯CSS标签 - 防止滚动页面顶部的标签变化

Question

我的情况完全称号描述：更换标签时，页面滚动到顶部，我不知道如何阻止它......

.ubdtabs { 
 
    
 
    float: none; 
 
    list-style: none; 
 
    position: relative; 
 
    text-align: left; 
 
    padding-left: 8px; 
 
} 
 
.ubdtabs li { 
 
    float: left; 
 
    display: block; 
 
} 
 
.ubdtabs input[type="radio"] { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
} 
 
.ubdtabs label { 
 
    display: block; 
 
    padding: 14px 21px; 
 

 
    
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
    background: -webkit-linear-gradient(top, #1B6889 0%,#009DE0 100%); 
 
    cursor: pointer; 
 
    position: relative; 
 
    
 
/* -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out;*/ 
 
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3); 
 
    border-radius: 5px 5px 0 0; 
 
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); 
 
} 
 
.ubdtabs label:hover { 
 
    background: #1B6889; 
 
} 
 
.ubdtabs .ubdtab-content { 
 
    z-index: 2; 
 
    display: none; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    
 
    line-height: 25px; 
 
    padding: 25px; 
 
    position: absolute; 
 
    
 
    left: 0; 
 
    background: #b3d4fc; 
 
} 
 
.ubdtabs [id^="ubdtab"]:checked + label { 
 
    
 
    
 
    background: #b3d4fc; 
 
} 
 
.ubdtabs [id^="ubdtab"]:checked ~ [id^="ubdtab-content"] { 
 
    display: block; 
 
}

<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
<ul class="ubdtabs"> 
 
    <li> 
 
     <input type="radio" name="ubdtabs" id="ubdtab1" checked /> 
 
     <label for="ubdtab1">first</label> 
 
     <div id="ubdtab-content1" class="ubdtab-content"> 
 
     <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> 
 
    </li> 
 
    
 
    <li> 
 
     <input type="radio" name="ubdtabs" id="ubdtab2" /> 
 
     <label for="ubdtab2">second</label> 
 
     <div id="ubdtab-content2" class="ubdtab-content"> 
 
\t \t <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> \t 
 
     </div> 
 
    </li> 
 
</ul> 
 

 
<br style="clear: both;" />

或者在Codepen：http://codepen.io/anon/pen/KwLPBQ

重现：
1.滚动页面一点点下来
2.单击 “第二” 标签
3页SC卷到顶部

任何想法？

Answer 1

删除顶部&左侧样式并将display:none;添加到收音机输入。如果您关注视口外的输入，则滚动条会启用，并会滚动到该元素。

如果要聚焦其是视口外部的元件使用此JavaScript代码

var donotScroll = function(element) { 
    var x = window.scrollX, y = window.scrollY; 
    element.focus(); 
    window.scrollTo(x, y); 
}