TAB MENU in HTML

I'm looking for a way to have a box in my html page which is split in two rows. The top one is for menu buttons, and the second one is the target where to display the con开发者_StackOverflow社区tent. When you click on one button on the menu, it should display the content on the second box. How can I do it?

Give http://jqueryui.com/demos/tabs/ a try.

jQuery Tools TABS are really good:

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

Basic example of HTML structure:

<!-- 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>

Check out the above link for more details, demos etc.

this works really nicely. just remove one of the tabs and it'll do what you are asking for, you can put anything you like in where it says tab content here

<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;
    }
}