使用<a> as button

Question

How do I do this? I want to change the content in my content area when a specific <a> tag is clicked. I am only limited to use HTML and CSS.

So far here are my codes: 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

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

<强> HTML

hello world
good morning
hello

此技术描述为here。