简体   繁体   English

带有电子邮件通讯的CSS的选项卡菜单

[英]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. 我正在尝试为电子邮件新闻稿建立选项卡菜单,而我被困在选择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. 问题是我是否可以仅使用css创建选项卡菜单,而无需使用form标签仅使用css选择器进行选择。

This is my html code: 这是我的html代码:

<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: 这是我的CSS代码:

#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/'

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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