使用Tabs html css和jquery

Question

I have this html fragment which represent a tabbed interface, I have been looking around how to enable the tab selection on click but no use, I even programmed it manually using javascript, it worked, but i believe this is not the professional way to do it, there must be some jquery solution. I am posting below the html code fragment

<div class="services">
    <div class="tabs">  

    <!--Top Tabs panel-->

    <ul class="ui-tabs-nav" id="services">
        <li class="ui-state-default ui-tabs-selected ui-state-active"><a href="#ui-tabs-currency"><span>العملات</span></a></li>
        <li class="ui-state-default"><a href="#ui-tabs-weather"><span>حالة الطفس</span></a></li>
    </ul>                                         

    <!--Bottom Tabs panel-->                        

    <div id="ui-tabs-currency" class="ui-tabs-panel ui-widget-content">
        <div class="pnl">
        sdfdsfsf
        </div>                                          
    </div>

    <div id="ui-tabs-weather" class="ui-tabs-panel ui-widget-content ui-tabs-hide">
        <div class="pnl">
        hhhhhhhhhhhhh
        </div>              
    </div>

    <div class="more"></div>                

    </div> <!-- End of tabs -->                
</div> <!-- End of services -->

Answer 1

jQuery is JavaScript, there is no "professional" way of doing this. There is only the method that best suits the need. If your method works, it works. If you want to see how it can be made better, consider posting the code on Code Review .

Take a look at jQuery UI Tabs if you want to see a jQuery way of doing this. Although, judging from your class names, you might already be using this... which leads me to wonder what you're trying to ask.

Answer 2

You can use jQuery-ui

HTML

<div class="services">
    <div class="tabs">
        <ul>
            <li><a href="#tabs-currency">العملات</a></li>
            <li><a href="#tabs-weather">حالة الطفس</a></li>
        </ul>

        <div id="tabs-currency"><p>sdfdsfsf</p></div>

        <div id="tabs-weather"><p>hhhhhhhhhhhhh</p></div>

    </div>
</div>

JS

$(function() {
    $( ".tabs" ).tabs();
});​

See the working demo here and reference Here .

Answer 3

如果您正在寻找jQuery解决方案，那么您应该使用jQuery UI选项卡 。

Answer 4

I assume you specifically want that code to work? if not this works really nicely. just drop your table in where it says (and probably you'll want to remove the

tags there now

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

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