html - 使用 <a> 作为按钮的纯 CSS 选项卡

Question

我该怎么做？我想在单击特定的 <a> 标签时更改内容区域中的内容。我仅限于使用 HTML 和 CSS。

到目前为止，这是我的代码: HTML

<div class="content2">
    <div class="tabs-content"> 
        <p>Come in and experience...</p>
        <img id="imagecoffee" src="coffee.jpg" alt="Coffee Image">
        <ul>
            <li>Specialty Coffee and Tea</li>
            <li>Freshly made sandwiches</li>
            <li>Bagels, Muffins, and Organic Snacks</li>
            <li>Music and Poetry Readings</li>
            <li>Open mic nights </li>
            <li>...</li>
        </ul>
        <p>23 Pine Road <br> Nottingham, NG1 5YU <br>0115 9324567 <br> <br> </p>        
    </div>
    </div>
</div>

CSS:

 .content2 .tabs-content{
    display:none;
 }



.nav nav a:active ~ .tabs-content{
    display:block;
}

Answer 1

您可以使用目标选项卡。

CSS

.tab div {
    display: none;
}

.tab div:target {
    display: block;
}

HTML

<div class="tab">
    <a href="#link1">Link 1</a>   
    <div id="link1">
        <h3>Content to Link 1</h3>
        <p>Hello World!</p>
    </div>
</div>

描述了此技术 here .