私はこれに似たタブを作成しようとしている私の与えられた画像

Question

に似たタブを探しています。私は問題を上記のスクリーンショットに従って設計することに直面しています。

右側に静的コンテンツを含む全幅タブを作成したいとします。スクリーンショットをチェックすると、タブの上下に全幅の境界があります。

スクリーンショットの右側に「報酬」セクションがあります。ユーザーが別のタブをクリックしても残るようなものが欲しいです。

は、ここに私のコード

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700"); 
 
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css"); 
 

 

 
main { 
 
    min-width: 320px; 
 
    max-width: 800px; 
 
    padding: 50px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 

 
section { 
 
    display: none; 
 
    padding: 20px 0 0; 
 
    border-top: 1px solid #ddd; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    margin: 0 0 -1px; 
 
    padding: 11px 11px; 
 
    font-weight: 500; 
 
    font-size: 16px; 
 
    text-align: center; 
 
    color: #878585; 
 
    border: 1px solid transparent; 
 
} 
 

 
label:before { 
 
    font-family: fontawesome; 
 
    font-weight: normal; 
 
    margin-right: 5px; 
 
} 
 

 
label[for*='1']:before { 
 
    content: '\f040'; 
 
} 
 

 
label[for*='2']:before { 
 
    content: '\f27b'; 
 
} 
 

 
label[for*='3']:before { 
 
    content: '\f003'; 
 
} 
 

 
label:hover { 
 
    color: #888; 
 
    cursor: pointer; 
 
} 
 

 
input:checked + label { 
 
    color: #252424; 
 
    border: 1px solid #ddd; 
 
    border-top: 2px solid #ed1c24; 
 
    border-bottom: 1px solid #fff; 
 
} 
 

 
#tab1:checked ~ #content1, 
 
#tab2:checked ~ #content2, 
 
#tab3:checked ~ #content3, 
 
#tab4:checked ~ #content4 { 
 
    display: block; 
 
} 
 

 
@media screen and (max-width: 650px) { 
 
    label { 
 
    font-size: 15px; 
 
    } 
 

 
    label:before { 
 
    margin: 5px; 
 
    font-size: 15px; 
 
    } 
 
} 
 
@media screen and (max-width: 400px) { 
 
    label { 
 
    padding: 15px; 
 
    } 
 
}

<input id="tab1" type="radio" name="tabs" checked> 
 
    <label for="tab1">Campaign</label> 
 
    
 
    <input id="tab2" type="radio" name="tabs"> 
 
    <label for="tab2">Comments</label> 
 
    
 
    <input id="tab3" type="radio" name="tabs"> 
 
    <label for="tab3">Contact</label> 
 
    
 
    <section id="content1"> 
 
    <h2> 
 
     Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. 
 
    </h2> 
 
    <p> 
 
     Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content2"> 
 
    <p>comments</p> 
 
    </section> 
 
    
 
    <section id="content3"> 
 
    <p>contact</p> 
 
</section>

あなたはこれをしたい

Answer 1

ですか？あなたのイメージを考慮して。 お客様の要件に応じて追加されました。 one parentをtab divとright side content divの両方に追加し、必要に応じてCSSを適用しました。それがあなたを助けることを願ってください。ありがとう。

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700"); 
 
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css"); 
 

 

 
main { 
 
    min-width: 320px; 
 
    max-width: 800px; 
 
    padding: 50px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
} 
 

 
section { 
 
    display: none; 
 
    padding: 20px 0 0; 
 
    border-top:1px solid #eee; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    margin: 0 0 -1px; 
 
    padding: 11px 11px; 
 
    font-weight: 500; 
 
    font-size: 16px; 
 
    text-align: center; 
 
    color: #878585; 
 
    border: 1px solid transparent; 
 
} 
 

 
label:before { 
 
    font-family: fontawesome; 
 
    font-weight: normal; 
 
    margin-right: 5px; 
 
} 
 

 
label[for*='1']:before { 
 
    content: '\f040'; 
 
} 
 

 
label[for*='2']:before { 
 
    content: '\f27b'; 
 
} 
 

 
label[for*='3']:before { 
 
    content: '\f003'; 
 
} 
 

 
label:hover { 
 
    color: #888; 
 
    cursor: pointer; 
 
} 
 

 
input:checked + label { 
 
    color: #252424; 
 
    border-bottom: 2px solid #29DE75 
 
} 
 

 
#tab1:checked ~ #content1, 
 
#tab2:checked ~ #content2, 
 
#tab3:checked ~ #content3, 
 
#tab4:checked ~ #content4 { 
 
    display: block; 
 
} 
 

 
@media screen and (max-width: 650px) { 
 
    label { 
 
    font-size: 15px; 
 
    } 
 

 
    label:before { 
 
    margin: 5px; 
 
    font-size: 15px; 
 
    } 
 
} 
 
@media screen and (max-width: 400px) { 
 
    label { 
 
    padding: 15px; 
 
    } 
 
} 
 
.parent{ 
 
    width:100%; 
 
} 
 
.child{ 
 
    width:60%; 
 
    float:left; 
 
} 
 
.side-content{ 
 
    width: 30%; 
 
    display: inline-block; 
 
    margin: 75px 20px; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <input id="tab1" type="radio" name="tabs" checked> 
 
    <label for="tab1">Campaign</label> 
 
    
 
    <input id="tab2" type="radio" name="tabs"> 
 
    <label for="tab2">Comments</label> 
 
    
 
    <input id="tab3" type="radio" name="tabs"> 
 
    <label for="tab3">Contact</label> 
 
    
 
    <section id="content1"> 
 
    <h2> 
 
     Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. 
 
    </h2> 
 
    <p> 
 
     Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. 
 
    </p> 
 
    </section> 
 
    
 
    <section id="content2"> 
 
    <p>comments</p> 
 
    </section> 
 
    
 
    <section id="content3"> 
 
    <p>contact</p> 
 
</section> 
 
    </div> 
 

 
<div class="side-content"> 
 
    <p>kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutt</p> 
 
    </div> 
 
    
 
    </div>