简体   繁体   中英

Tab menu with css for email newsletter

I'm trying to build a tab menu for a email newsletter and I'm stuck in selecting the elements in css. The question is if I can create the tab menu just with css and just selecting with css selectors without creating a form tag.

This is my html code:

<body>

<table class="tabs">

    <td id="tab1" class="title1">
        <h2><a href="#tab1">Tab 1</a></h2>

    <div id="div1">
    <p>This content appears on tab 1.</p></div>
    </td>

    <td id="tab2" class="title2">
        <h2><a href="#tab2">Tab 2</a></h2>
    <div id="div2"><p>This content appears on tab 2.</p></div>

    </td>

    <td id="tab3" class="title3">
        <h2><a href="#tab3">Tab 3</a></h2>
    <div id="div3"><p>This content appears on tab 3.</p></div>

    </td>


</table>

</body>

This is my css code:

#tab1:target + div,
#tab2:target + div,
#tab3:target + div{
    background-color: green;
}

What I want to reach is to have the slider effect or to have like an accordion effect but with tabs, that when the second tab button is pressed that the second tab content will appear.

如果发现与所需链接相似,则可以通过此链接。

'http://freshinbox.com/blog/interactive-tabs-for-email/'

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM