單擊列表項時使文本消失/出現

Question

這是清單

<div>
    <a href="#hig"><button class="tag-btn">High blood pressure  Diabetes</button></a>
    <a href="#hih"><button class="tag-btn">High cholesterol</button></a>
    <a href="#thy"><button class="tag-btn">Thyroid disorder screening</button></a>
    <a href="#car"><button class="tag-btn">Cardiovascular risk assessment</button></a>
    <a href="#can"><button class="tag-btn">Cancer screenings</button></a>
    <a href="#bre"><button class="tag-btn">Breast screening</button></a>
    <a href="#lun"><button class="tag-btn">Lung screening</button></a>
    <a href="#col"><button class="tag-btn">Colon screening  Cervical screening</button></a>
    <a href="#pro"><button class="tag-btn">Prostate screening</button></a>
    <a href="#add"><button class="tag-btn">Addiction screening</button></a> 
</div>

這是相應的div

<div class="serv-text fl-wrap one" id="hig">
b
</div>
<div class="serv-text fl-wrap one" id="hih">
c
</div>
<div class="serv-text fl-wrap one" id="thy">
d
</div>
<div class="serv-text fl-wrap one" id="car">
e
</div>
<div class="serv-text fl-wrap one" id="can">
f
</div>
<div class="serv-text fl-wrap one" id="bre">
g
</div>
<div class="serv-text fl-wrap one" id="lun">
h
</div>
<div class="serv-text fl-wrap one" id="col">
e
</div>
<div class="serv-text fl-wrap one" id="pro">
j
</div>
<div class="serv-text fl-wrap one" id="add">
k
</div>

這是我的 css

#obs, #hig, #hih, #thy, #car, #can, #bre, #lun, #col, #pro, #add {
  display: none; 
}

#obs:target, #hig:target, #hih:target, #thy:target, #car:target, #can:target, #bre:target, #lun:target, #col:target, #pro:target, #add:target {
  display: block;
}

使用上面的代碼效果很好，但我使用的是粘性 header，因此顯示的 div 出現在 header 下方，這對於必須始終向下滾動的用戶來說很不方便。

考慮到粘性 header 是否有更好的方法來實現這一目標？

也許它可以與我不知道的 java 腳本一起使用...

幫我出家人...

Answer 1

header 隱藏或遮蓋了您要顯示的 div 我是否理解正確。 如果是這種情況，您可以將 topmargin 添加到要顯示元素的 maindiv，以便 div 在 header 結束時開始。 也許我不明白你的問題，但我認為這是最簡單的方法，或者你用網格、引導程序或類似的東西重建你的布局，它會為你安排 div。