CODEWITHSUNDEEP
jqueryhtmlcss
Mohammed Jabary
Mohammed Jabary

Reputation: 3

Using Tabs html css and jquery

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

Upvotes: 0

Views: 373

Answers (4)

Andy at Focallocal
Andy at Focallocal

Reputation: 176

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

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

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 1

sachleen
sachleen

Reputation: 31131

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.

Upvotes: 1

c0deNinja
c0deNinja

Reputation: 3986

If you are looking for a jQuery solution, then you should use jQuery UI Tabs.

Upvotes: 0

Related Questions