我想弄清楚如何給某人一個指向我頁面上 CSS 選項卡的直接鏈接，但給他們pagename.html#tab2不起作用。如果可以在沒有腳本的情況下執行此操作，那將是最好的，但此時我對任何事情都持開放態度。順便說一句，隨意撕開我的代碼！我只是在學習如何做到這一點，所以它可能沒有應有的效率！謝謝！
/* Tabs */
input /*hide radio buttons */
{
display: none;
}
input label /* show labels in line */
{
display: inline-block;
font-size: 1.3em;
}
input~.tab /* show contents only for selected tab */
{
display: none;
}
#tab1:checked~.tab.content1,
#tab2:checked~.tab.content2 {
display: block;
}
input label {
border: 1px solid #999;
background: #101010;
padding: 4px 12px;
border-radius: 6px 6px 0 0;
position: relative;
top: 1px;
}
input label:hover {
background: #212121;
}
input:checked label {
background: transparent;
border-bottom: 2px solid #292929;
}
input~.tab {
border-top: 1px solid #999;
padding: 12px;
}<div style="background-color: #292929;color: #b2b2b2;line-height: 1.5em;font-family: Mulish,sans-serif;">
<input type="radio" name="tabs" id="tab1" checked="checked" />
<label for="tab1">Tab 1</label>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Tab 2</label>
<div class="tab content1">
<p>Tab content 1</p>
</div>
<div class="tab content2">
<p>Tab content 2</p>
</div>
</div>uj5u.com熱心網友回復：
如果您指定
<input type="radio" name="tabs" id="tab1" checked />
那么這個單選按鈕將在頁面加載時默認選中。如果您希望檢查其他選項卡，您可以通過從 URL 獲取哈希然后以編程方式檢查它來做到這一點
<script>
// this will be #tag2 in your case
let hash = document.location.hash;
// remove the hash sign
hash = hash.slice(1, hash.length);
let tab = document.getElementById( hash );
// check the required input element
tab.setAttribute('checked', 'checked');
</script>
在加載輸入元素之后，您將希望將此腳本包含在正文的末尾附近。
uj5u.com熱心網友回復：
利用
scrollIntoView()
檢查這個檔案：https : //developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
我希望這有幫助??
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/388452.html
上一篇：第二個div在第一個div下