帶有css3的選項卡，點擊更改樣式

Question

我試圖使用this recepee來實現不使用JS或JQuery，純CSS的選項卡，但我被卡住了。 目標是在點擊某個標籤上顯示不同的內容，並更改標籤樣式。 現在它顯示我想要的標籤，但每個div的內容以某種方式顯示在標籤上，而不是在標籤下。另外，我不能讓它改變風格。任何人都可以幫忙嗎？謝謝。對不起，如果問題看起來很愚蠢 - 我只是從html開始。

現在是這樣的：

<div id="menu"> 
    <label class="collapse" for="1">tab1</label> <input id="1" name="r" type="radio" /> 
    <div>111111111111111111111</div> 
    <label class="collapse" for="2">tab2</label> <input id="2" name="r" type="radio"/> 
    <div>2222222222222222222222</div> 
    <label class="collapse" for="3">tab3</label> <input id="3" name="r" type="radio" /> 
    <div>333333333333333333333</div> 
</div> 

我的CSS：

#menu { 
     padding-left: 20px; 
    } 

    #menu label { 
     height: 30px; 
     background-color: #d1ecee; 
     width: 75px; 
     color: #2cb674; 
     font-size: 12px; 
     line-height: 30px; 
     text-align: center; 
     float: left; 
     position: relative; 
     margin-left: 2px; 
    display:block; 
     margin-right: 20px; 
    } 

    #menu label:before { 
     content: ""; 
     position: absolute; 
     left: -20px; 
     width: 0; 
     height: 0; 
     border-top: 30px solid #d1ecee; 
     border-left: 20px solid transparent; 
    display:block; 
    } 

    #menu label:after { 
     content: ""; 
     position: absolute; 
     right: -20px; 
     width: 0; 
     height: 0; 
     border-bottom: 30px solid #d1ecee; 
     border-right: 20px solid transparent; 

    } 

#menu input { 
    display: none !important; 
} 

#menu input+* { 
    display: none !important; 
} 
#menu input:checked+* { 
    display: block !important; 
} 

#menu input:checked+label { 
    background-color: #2cb674; 
    color: white; 
} 

#menu input:checked+label:before { 
    border-top: 30px solid #2cb674; 
} 

#menu input:checked+label:after { 
    border-bottom: 30px solid #2cb674; 
} 

UPDATE：

這是圖片我現在由於目標的div的絕對定位

Answer 1

你h與兄弟選擇器有關的問題。在+標誌應選擇在你的HTML中的下一個同級元素，請參閱30 CSS selectors you should know

更優雅的方式是：

1. 隱藏單選按鈕與opacity和absolute定位
2. 使標籤內容容器absolute定位，以保持它們低於標籤按鈕
3. 顯示其單選按鈕被檢查的標籤內容
4. 重新arranage h TML這樣的順序是input，label然後div

HTML

<div id="menu"> 

    <!-- Selected by default --> 

    <input id="1" name="r" type="radio" checked/> 
    <label class="collapse" for="1">tab1</label> 
    <div>111111111111111111111</div> 

    <input id="2" name="r" type="radio"/> 
    <label class="collapse" for="2">tab2</label> 
    <div>2222222222222222222222</div> 

    <input id="3" name="r" type="radio" /> 
    <label class="collapse" for="3">tab3</label> 
    <div>333333333333333333333</div> 
</div> 

CSS

#menu { 
    padding-left: 20px; 
} 
#menu label { 
    height: 30px; 
    background-color: #d1ecee; 
    width: 75px; 
    color: #2cb674; 
    font-size: 12px; 
    line-height: 30px; 
    text-align: center; 
    float: left; 
    position: relative; 
    margin-left: 2px; 
    display:block; 
    margin-right: 20px; 
} 
#menu label:before { 
    content: ""; 
    position: absolute; 
    left: -20px; 
    width: 0; 
    height: 0; 
    border-top: 30px solid #d1ecee; 
    border-left: 20px solid transparent; 
    display:block; 
} 
#menu label:after { 
    content: ""; 
    position: absolute; 
    right: -20px; 
    width: 0; 
    height: 0; 
    border-bottom: 30px solid #d1ecee; 
    border-right: 20px solid transparent; 
} 
#menu input:checked + label { 
    background-color: #2cb674; 
    color: white; 
} 
#menu input:checked + label:before { 
    border-top: 30px solid #2cb674; 
} 

#menu input:checked + label:after { 
    border-bottom: 30px solid #2cb674; 
} 

/* Hide radio buttons */ 
#menu input[type=radio]{ 
    opacity:0; 
    position:absolute; 
    left:-200%; 
} 

/* Hide all tab divs and keep them below the tab buttons */ 
#menu > div { 
    display:none; 
    top:5em; 
    position:absolute; 
    max-width:100%; 
} 

/* Show the tab whose sibling radio button is checked */ 
#menu input:checked + label + div{ 
    display:block; 
} 

這應該只是罰款