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

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.