帶有電子郵件通訊的CSS的選項卡菜單

Question

我正在嘗試為電子郵件新聞稿建立選項卡菜單，而我被困在選擇CSS中的元素。 問題是我是否可以僅使用css創建選項卡菜單，而無需使用form標簽僅使用css選擇器進行選擇。

這是我的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>

這是我的CSS代碼：

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

我想要達到的是具有滑塊效果或具有類似手風琴效果但帶有選項卡的功能，即當按下第二個選項卡按鈕時，將顯示第二個選項卡的內容。

Answer 1

如果發現與所需鏈接相似，則可以通過此鏈接。

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

帶有電子郵件通訊的CSS的選項卡菜單

問題描述

1 個解決方案

解決方案1
0 2017-08-08 11:41:40

帶有電子郵件通訊的CSS的選項卡菜單

問題描述

1 個解決方案

解決方案1 0 2017-08-08 11:41:40

解決方案1
0 2017-08-08 11:41:40