HTML中的选项卡

Question

我正在寻找一种方法来在我的html页面中分成两行。第一个是菜单按钮，第二个是显示内容的目标。当你点击菜单上的一个按钮时，它应该在第二个框上显示内容。我该怎么做？

Answer 1

给http://jqueryui.com/demos/tabs/试试。

Answer 2

jQuery的工具选项卡是真的好：

http://flowplayer.org/tools/tabs/index.html

HTML结构的基本例如：

<!-- the tabs --> 
<ul class="tabs"> 
    <li><a href="#">Tab 1</a></li> 
    <li><a href="#">Tab 2</a></li> 
    <li><a href="#">Tab 3</a></li> 
</ul> 

<!-- tab "panes" --> 
<div class="panes"> 
    <div>pane 1 content</div> 
    <div>pane 2 content</div> 
    <div>pane 3 content</div> 
</div> 

退房上面的链接了解更多详情，演示等

Answer 3

这作品非常好。只是删除选项卡之一，它会做你问什么，你可以把任何你喜欢在哪里这里说的标签内容

<div id="selector"> 

</div> 
<div class="tabs"> 
    <!-- Radio button and lable for #tab-content1 --> 
    <input type="radio" name="tabs" id="tab1" checked > 
    <label for="tab1"> 
     <i class="fa fa-rocket" aria-hidden="true"></i> 
<span>Projects</span> 
    </label> 
    <!-- Radio button and lable for #tab-content2 --> 
    <input type="radio" name="tabs" id="tab2"> 
    <label for="tab2"> 
     <i class="fa fa-users" aria-hidden="true"></i><span>Flash-Mobs</span> 
    </label> 
    <!-- Radio button and lable for #tab-content3 --> 
    <input type="radio" name="tabs" id="tab3"> 
    <label for="tab3"> 
     <i class="fa fa-heartbeat" aria-hidden="true"></i><span>Movement</span> 
    </label> 
    <div id="tab-content1" class="tab-content"> 
     <h3>Positive Action Projects</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content1 --> 
    <div id="tab-content2" class="tab-content"> 
     <h3>Internatonal Positive Action Days</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content2 --> 
    <div id="tab-content3" class="tab-content"> 
    <h3>Grow the Movement</h3> 
     <p><!-- Tab content here --></p> 
    </div> <!-- #tab-content2 --> 
    </div> 

CSS

.tabs { 
    max-width: 90%; 
    float: none; 
    list-style: none; 
    padding: 0; 
    margin: 75px auto; 
    border-bottom: 4px solid #ccc; 
} 
.tabs:after { 
    content: ''; 
    display: table; 
    clear: both; 
} 
.tabs input[type=radio] { 
    display:none; 
} 
.tabs label { 
    display: block; 
    float: left; 
    width: 33.3333%; 
    color: #ccc; 
    font-size: 30px; 
    font-weight: normal; 
    text-decoration: none; 
    text-align: center; 
    line-height: 2; 
    cursor: pointer; 
    box-shadow: inset 0 4px #ccc; 
    border-bottom: 4px solid #ccc; 
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */ 
    transition: all 0.5s; 
} 
.tabs label span { 
    display: none; 
} 
.tabs label i { 
    padding: 5px; 
    margin-right: 0; 
} 
.tabs label:hover { 
    color: #3498db; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
} 
.tab-content { 
    display: none; 
    width: 100%; 
    float: left; 
    padding: 15px; 
    box-sizing: border-box; 
    background-color:#ffffff; 
} 

.tab-content * { 
    -webkit-animation: scale 0.7s ease-in-out; 
    -moz-animation: scale 0.7s ease-in-out; 
    animation: scale 0.7s ease-in-out; 
} 
@keyframes scale { 
    0% { 
    transform: scale(0.9); 
    opacity: 0; 
    } 
    50% { 
    transform: scale(1.01); 
    opacity: 0.5; 
    } 
    100% { 
    transform: scale(1); 
    opacity: 1; 
    } 
} 

.tabs [id^="tab"]:checked + label { 
    background: #FFF; 
    box-shadow: inset 0 4px #3498db; 
    border-bottom: 4px solid #3498db; 
    color: #3498db; 
} 
#tab1:checked ~ #tab-content1, 
#tab2:checked ~ #tab-content2, 
#tab3:checked ~ #tab-content3 { 
    display: block; 
} 

@media (min-width: 768px) { 
    .tabs i { 
     padding: 5px; 
     margin-right: 10px; 
    } 
    .tabs label span { 
     display: inline-block; 
    } 
    .tabs { 
    max-width: 750px; 
    margin: 50px auto; 
    } 
}