コンテンツの下にあるタブのナビゲーションバー

Question

インターネット上でこのコードを見つけましたが、最初にセクションタグを入力してから入力する必要がありました。

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

 
input { 
 
    display: none; 
 
} 
 

 
input:checked+label { 
 
    color: #ff0000; 
 
} 
 

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

<input id="tab1" type="radio" name="tabs" checked> 
 
<label for="tab1">home</label> 
 

 
<input id="tab2" type="radio" name="tabs"> 
 
<label for="tab2">about</label> 
 

 
<input id="tab3" type="radio" name="tabs"> 
 
<label for="tab3">FAQ</label> 
 

 
<input id="tab4" type="radio" name="tabs"> 
 
<label for="tab4">contact</label> 
 

 
<section id="content1"> 
 
    <p>home</p> 
 
</section> 
 

 
<section id="content2"> 
 
    <p>about</p> 
 
</section> 
 

 
<section id="content3"> 
 
    <p>FAQ</p> 
 
</section> 
 

 
<section id="content4"> 
 
    <p>contact</p> 
 
</section>

コンテンツ

下のナビゲーションバーを移動する方法任意のアイデアは、私はあなたのコードを変更しているあなたに

Answer 1

ありがとうございます。このコードを試してください。 <div id="home">と

a:focus { 
 
    outline: none!important; 
 
} 
 
.content-wrap { 
 
    background:#eee; 
 
    padding:20px; 
 
    margin-bottom:10px; 
 
} 
 
.tabs-bottom > .nav-tabs{ 
 
    border-bottom: 0; 
 
} 
 
.tabs-below > .nav-tabs { 
 
    border-bottom: 0; 
 
} 
 
.tab-content > .tab-pane, 
 
.pill-content > .pill-pane { 
 
    display: none; 
 
} 
 
.tab-content > .active, 
 
.pill-content > .active { 
 
    display: block; 
 
} 
 
.tabs-bottom > .nav-tabs { 
 
    border-top: 1px solid #ddd; 
 
} 
 
.tabs-bottom > .nav-tabs > li { 
 
    margin-top: -1px; 
 
    margin-bottom: 0; 
 
} 
 
.tabs-bottom > .nav-tabs > li > a { 
 
    border-radius: 0 0 4px 4px; 
 
} 
 

 
.tabs-below > .nav-tabs > li > a:hover, 
 
.tabs-below > .nav-tabs > li > a:focus { 
 
    border-top-color: #ddd; 
 
    border-bottom-color: transparent; 
 
} 
 

 
.tabs-bottom > .nav-tabs > .active > a, 
 
.tabs-bottom > .nav-tabs > .active > a:hover, 
 
.tabs-bottom > .nav-tabs > .active > a:focus { 
 
    border-color: transparent #ddd #ddd #ddd; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> \t \t 
 
     <!-- tabs --> 
 
     <div class="tabbable tabs-bottom"> 
 
     <div class="tab-content"> 
 
      <div class="tab-pane active" id="home">     
 
      <div class="content-wrap"> 
 
       <h2>Home Tab</h2> 
 
       <p>test</p>     
 
      </div> 
 
      </div> 
 
      <div class="tab-pane" id="about"> 
 
      <div class="content-wrap"> 
 
       <h2>About Tab</h2> 
 
       <p>test</p>     
 
      </div> 
 
      </div> 
 

 
      <div class="tab-pane" id="services"> 
 
      <div class="content-wrap"> 
 
       <h2>Services Tab</h2> 
 
       <p>test</p>     
 
      </div> 
 
      </div> 
 

 
      <div class="tab-pane" id="contact"> 
 
      <div class="content-wrap"> 
 
       <h2>Contact Tab</h2> 
 
       <p>test</p>     
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- tab content --> 
 
     <ul class="nav nav-tabs"> 
 
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
 
      <li><a href="#about" data-toggle="tab">About</a></li> 
 
      <li><a href="#services" data-toggle="tab">Services</a></li> 
 
      <li><a href="#contact" data-toggle="tab">Contact</a></li> 
 
     </ul> \t \t \t \t 
 
     </div> 
 
     <!-- /tabs --> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

使用ナビゲーションバーの技術。

これは簡単です。

またはJavaScriptを使用すると、より洗練された外観にすることができます。

body {margin:0;} 
 

 
.navbar { 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
.navbar a { 
 
    float: left; 
 
    display: block; 
 
    color: #000; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.main { 
 
    padding: 16px; 
 
    margin-bottom: 30px; 
 
    height: 1500px; /* Used to enable scrolling */ 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="navbar"> 
 
    <a href="#home">Home</a> 
 
    <a href="#about">About</a> 
 
</div> 
 

 
<div id="home"class="main"> 
 
    <h1>Home</h1> 
 
</div> 
 

 
<div id="about"class="main"> 
 
    <h1>About</h1> 
 
</div> 
 

 
</body> 
 
</html>

Answer 3

あなたはdivによってwrapsection tags、以下のようなことを試すことができ、その後、あなたはposition:absoluteを使用してlabelの位置を変更することができ、

section { 
 
    display: none; 
 
    padding: 0px 0 0; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
input { 
 
    display: none; 
 
} 
 
input:checked+label { 
 
    color: #ff0000; 
 
} 
 
#tab1:checked~.wr #content1{ 
 
    display:block; 
 
} 
 
#tab2:checked~.wr #content2{ 
 
    display:block; 
 
} 
 
#tab3:checked~.wr #content3{ 
 
    display:block; 
 
} 
 
#tab4:checked~.wr #content4{ 
 
    display:block; 
 
} 
 
.wr{ 
 
    position:relative; 
 
    top:0; 
 
    display:block; 
 
} 
 
.tb1{ 
 
    position:absolute; 
 
    top:80px; 
 
    display:inline-block; 
 
} 
 
.tb2{ 
 
    position:absolute; 
 
    top:80px; 
 
    display:inline-block; 
 
    left:60px; 
 
} 
 
.tb3{ 
 
    position:absolute; 
 
    top:80px; 
 
    display:inline-block; 
 
    left:120px; 
 
} 
 
.tb4{ 
 
    position:absolute; 
 
    top:80px; 
 
    display:inline-block; 
 
    left:180px; 
 
}

<input id="tab1" type="radio" name="tabs" checked> 
 
<label for="tab1" class="tb1">home</label> 
 

 
<input id="tab2" type="radio" name="tabs"> 
 
<label for="tab2" class="tb2">about</label> 
 

 
<input id="tab3" type="radio" name="tabs"> 
 
<label for="tab3" class="tb3">FAQ</label> 
 

 
<input id="tab4" type="radio" name="tabs"> 
 
<label for="tab4" class="tb4">contact</label> 
 

 

 
<div class="wr"> 
 
<section id="content1"> 
 
    <p>home</p> 
 
</section> 
 

 
<section id="content2"> 
 
    <p>about</p> 
 
</section> 
 

 
<section id="content3"> 
 
    <p>FAQ</p> 
 
</section> 
 

 
<section id="content4"> 
 
    <p>contact</p> 
 
</section> 
 
</div>

Answer 4

あなただけのコンテンツを並べ替えるためのCSSの表示フレックスを使用する必要があります。

https://codepen.io/seltix/pen/XaLVaY

<dix id="blockcontainer" > 

    <input id="tab1" type="radio" name="tabs" checked> 
    <label for="tab1">home</label> 

    <input id="tab2" type="radio" name="tabs"> 
    <label for="tab2">about</label> 

    <input id="tab3" type="radio" name="tabs"> 
    <label for="tab3">FAQ</label> 

    <input id="tab4" type="radio" name="tabs"> 
    <label for="tab4">contact</label> 

    <div class="divider"></div> 

    <section id="content1"> 
    <p>home</p> 
    </section> 

    <section id="content2"> 
    <p>about</p> 
    </section> 

    <section id="content3"> 
    <p>FAQ</p> 
    </section> 

    <section id="content4"> 
    <p>contact</p> 
    </section> 

    </div> 

CSS：

section { 
    display: none; 
    padding: 20px; 
    border-bottom: 1px solid #AAA; 
    background :#EEE; 
} 

div.divider { 
    width:100%; 
} 

input { 
    display: none; 
} 

label { 
    padding: 10px; 
} 

input:checked + label { 
    color: #ff0000; 
} 

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


#blockcontainer { 
    -ms-box-orient: horizontal; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

section { 
    -ms-flex-order: 1; 
    order: 1; 
} 

div.divider { 
    -ms-flex-order: 6; 
    order: 6; 
} 

input, label { 
    -ms-flex-order: 12; 
    order: 12; 
}