Using Tabs html css and 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 -->

jQuery is javascript. If you've already come up with a solution that works using javascript, why do you need a jQuery solution? — Jason Towne
– Jason Towne, Commented Jul 5, 2012 at 23:26
I think vanilla Javascript is even better - you save 40K of bandwidth by not including jQuery — Zoltan Toth
– Zoltan Toth, Commented Jul 5, 2012 at 23:29

The Alpha · Accepted Answer · 2012-07-05 23:54:04Z

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.

edited Jul 5, 2012 at 23:54

answered Jul 5, 2012 at 23:43

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zoltan Toth Over a year ago

"have to use" it's an overstatement, but yes - that's definitely an option worth considering ;-)

The Alpha Over a year ago

OP mentioned jQuery so I think he should to use jQuery ui as the simplest and best IMO.

The Alpha Over a year ago

I've changed have to to should, hope it's okay ? :-)

Zoltan Toth Over a year ago

"can" or "might want" would be better :))))) +1 Your solution is really the simplest

Mohammed Jabary Over a year ago

Thank you guys that was very helpful, really appreciate your help

Community · Accepted Answer · 2017-04-13 12:40:36Z

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.

edited Apr 13, 2017 at 12:40

CommunityBot

11 silver badge

answered Jul 5, 2012 at 23:32

sachleen

31.2k8 gold badges82 silver badges75 bronze badges

Comments

c0deNinja · Accepted Answer · 2012-07-05 23:31:36Z

0

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

answered Jul 5, 2012 at 23:31

c0deNinja

3,9842 gold badges31 silver badges46 bronze badges

Comments

Andy at Focallocal · Accepted Answer · 2016-08-09 06:04:53Z

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

Collectives™ on Stack Overflow

Using Tabs html css and jquery

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related