主頁(yè)只有幾個(gè)按鈕，用于顯示用戶指定的內(nèi)容。這些按鈕#home不在標(biāo)題中，因此按鈕將僅顯示在 on 上#home。<section id="home"> <a href="#content">content</a> <a href="#something">something</a> <a href="#someelse">someelse</a></section><section id="content"><section id="something"><section id="someelse">我:target在 css 上找到了方法，它看起來很容易使用并且工作正常，但#home沒有顯示。似乎只有當(dāng)我在外面有固定標(biāo)題時(shí)它才有效sectionsection { display: none;}section:target { display: block;}除此以外的每個(gè)部分#home都會(huì)有后退按鈕，該按鈕也會(huì)將用戶發(fā)送到該按鈕#home。這在方法上相當(dāng)簡(jiǎn)單，:target因?yàn)槲覄倓偸褂昧薬 href="#"，并且它有效。我還可以使用什么其他方法？
1 回答
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
我想不出任何純 CSS 方法來做到這一點(diǎn)，但可以使用一些 JavaScript 輕松完成，檢查哈希值是否為空，然后在有值時(shí)顯示和隱藏#home它。
window.onhashchange = checkHash;
checkHash();
function checkHash() {
var home = document.getElementById('home');
//Check if the hash is empty
if (window.location.hash.substring(1) == '') {
home.style.display = 'block';
} else {
home.style.display = 'none';
}
}
.section {
display: none;
}
.section:target {
display: block !important;
}
<div id="home" class="section">
<a href="#content">Content</a>
<a href="#somthingElse">Somthing Else</a>
<h3>Home</h3>
</div>
<div id="content" class="section">
<a href="#home">Home</a>
<h3>Content</h3>
</div>
<div id="somthingElse" class="section">
<a href="#home">Home</a>
<h3>Somthing Else</h3>
</div>
褪色
我用的position: absolute是這樣它們會(huì)堆疊在一起。z-index: -1將使所有其余部分保持清晰，以阻止指針事件重疊。opacity: 0顯然是用于淡入淡出。
我更改了 JS 腳本以簡(jiǎn)化 CSS?，F(xiàn)在，當(dāng)您轉(zhuǎn)到時(shí)，example.com/html.html您會(huì)被重定向到example.com/html.html#home（沒有后退按鈕的歷史記錄更改）。
window.onhashchange = checkHash;
checkHash();
function checkHash() {
//Check if the hash is empty
if (window.location.hash.substring(1) == '') {
history.replaceState(undefined, undefined, "#home")
}
}
.section {
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.5s;
}
.section:target {
z-index: 1;
opacity: 1;
}
<div id="home" class="section">
<a href="#content">Content</a>
<a href="#somthingElse">Somthing Else</a>
<h3>Home</h3>
</div>
<div id="content" class="section">
<a href="#home">Home</a>
<h3>Content</h3>
</div>
<div id="somthingElse" class="section">
<a href="#home">Home</a>
<h3>Somthing Else</h3>
</div>
- 1 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報(bào)
0/150
提交
取消