純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); 
}